Notes
Notes - notes.io |
Data validation is the process of ensuring that user input is clean, correct, and useful.
Typical validation tasks are:
has the user filled in all required fields?
has the user entered a valid date?
has the user entered text in a numeric field?
Most often, the purpose of data validation is to ensure correct user input.
Validation can be defined by many different methods, and deployed in many different ways.
Server side validation is performed by a web server, after input has been sent to the server.
Client side validation is performed by a web browser, before input is sent to a web server. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JavaScript Form Validation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Welcome to the best form on Internet!</h1>
<form aciton ="/myaction.php" name="myForm" onsubmit="return validateForm()" method="post">
<div class="formdesign" id="name">
Name: <input type="text" name="fname" required><b><span class="formerror"> </span></b>
</div>
<div class="formdesign" id="email">
Email: <input type="email" name="femail" required><b><span class="formerror"> </span></b>
</div>
<div class="formdesign" id="phone">
Phone: <input type="phone" name="fphone" required><b><span class="formerror"></span></b>
</div>
<div class="formdesign" id="pass">
Password: <input type="password" name="fpass" required><b><span class="formerror"</span></b>
</div>
<div class="formdesign" id="cpass">
Confirm Password: <input type="password" name="fcpass" required><b><span class="formerror"></span></b>
</div>
<input class="but" type="submit" value="Submit">
</form>
</body>
<script src="index.js"></script>
</html>
body {
padding: 10px 50px;
}
.formdesign {
font-size: 20px;
}
.formdesign input {
width: 50%;
padding: 12px 20px;
border: 1px solid blue;
margin: 14px;
border-radius: 4px;
font-size: 15px;
}
.formerror {
color: red;
}
.but {
border-radius: 9px;
width: 100px;
height: 50px;
font-size: 25px;
margin: 22px 20px;
}
function clearErrors(){
errors = document.getElementsByClassName('formerror');
for(let item of errors)
{
item.innerHTML = "";
}
}
function seterror(id, error){
//sets error inside tag of id
element = document.getElementById(id);
element.getElementsByClassName('formerror')[0].innerHTML = error;
}
function validateForm(){
var returnval = true;
clearErrors();
//perform validation and if validation fails, set the value of returnval to false
var name = document.forms['myForm']["fname"].value;
if (name.length<5){
seterror("name", "*Length of name is too short");
returnval = false;
}
if (name.length == 0){
seterror("name", "*Length of name cannot be zero!");
returnval = false;
}
var email = document.forms['myForm']["femail"].value;
if (email.length>15){
seterror("email", "*Email length is too long");
returnval = false;
}
var phone = document.forms['myForm']["fphone"].value;
if (phone.length != 10){
seterror("phone", "*Phone number should be of 10 digits!");
returnval = false;
}
var password = document.forms['myForm']["fpass"].value;
if (password.length < 6){
// Quiz: create a logic to allow only those passwords which contain atleast one letter, one number and one special character and one uppercase letter
seterror("pass", "*Password should be atleast 6 characters long!");
returnval = false;
}
var cpassword = document.forms['myForm']["fcpass"].value;
if (cpassword != password){
seterror("cpass", "*Password and Confirm password should match!");
returnval = false;
}
return returnval;
}
|
|
Notes.io is a web-based application for taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000 notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 12 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
