JavaScript Form Validation
JavaScript Form Validation means that the data entered in the form should be appropriate and authentic. It is a process to check and verify the data in the input fields.
Javascript validation is client side validation, i.e. the data gets verified in the client's pc and does not go to the server if the data is inappropriate. It is faster than the server side validation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Form Validation </title>
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var password=document.forms["myForm"]["password"].value;
if (x == "") {
alert("Name must be filled out");
return false;
}
else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="../index.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname"> Password: <input type="password" name="password">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
JavaScript Form Password Validation
JavaScript Password Validation
In the example below, the user has to enter same password twice. After submitting the form, the passwords will get tested for a match, if both passwords matches then its ok, otherwise user would have to enter the passwords again to match.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Form Password Validation </title>
<script>
function matchpass(){
var firstpassword=document.form_password.password.value;
var secondpassword=document.form_password.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
}
}
</script>
<form name="form_password" action="../index.php" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
</body>
</html>
Output
JavaScript Form Password Validation
JavaScript Number Validation
In the example below, the user can only enter digits in the input field. If user enters something other than digits like alphabets, symbols, etc. then an error message would be thrown.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Form Number Validation </title>
<body>
<h2>JavaScript Can Validate Input</h2>
<p>Please input a number between 1 and 10:</p>
<input id="number">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("number").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Output
JavaScript Email Validation
In the example below, the e-mail entered will be checked for validation. It will be checked whether the e-mail is in proper syntax or not.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> JavaScript Form Number Validation </title>
<script>
function validateForm() {
var x = document.forms["myForm"]["email"].value;
var atpos = x.indexOf("@");
var dotpos = x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) {
alert("Enter valid e-mail address");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action="../index.php" onsubmit="return validateForm();" method="post">
Email: <input type="text" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>
Output
JavaScript Form Number Validation