Advertisement

Advertisement


JavaScript Form Validation

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
Name: Password:

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
Password : Re-enter Password :

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 Form Number Validation

Please input a number between 1 and 10:


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
Email:










Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.