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:




Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »

Latest Updates

PHP Introduction

How to Run a PHP program in Xampp?

How can I create a phpinfo.php page?

How to Define a Variable in PHP

PHP Echo and Print Statements

Working with PHP Operators

Understanding the PHP Data Types

How to Write Comments in PHP

How to Define a Constant in PHP

PHP if...else...elseif Statements