Form data validation using the JavaScript
It is vary important to validate the user data into the browser before sending the data to the server.
We can apply the some validation using JavaScript like the required fields, length of the input, password strength, email validation and much more.
Some time user may be give the inappropriate values So validation is must, before sending it to the server.
JavaScript helps us to validate the form on the client side so the processing will be fast at the server. We can validate the form data like name, password, email, date, mobile number and etc.
Required Field Validation
Using the JavaScript we can check that user gives the required input or not. Like the name, email or phone number.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Required field validation</title>
<meta charset="utf-8" />
<script type="text/javascript">
function validate() {
var form = document.forms["frmRegist"];
var txtFName = form.elements["txtFName"].value;
var txtLName = form.elements["txtLName"].value;
if (txtFName == "" || txtLName == "") {
alert("Sorry, required fields can not be null.");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="frmRegist" onsubmit="return validate()">
First Name: <input type="text" name="txtFName" /> *<br /> <br />
Last Name: <input type="text" name="txtLName" /> *<br /> <br />
<input type="submit" name="btnSubmit" value="Validate" />
</form>
</body>
</html>
Required Field Validation Demo
Password Validation
We can also validate the password in the browser before sending it to the server.
We can only do the simple password validation like the password and confirm password are the same or not, password length or the strength of the password.
<!DOCTYPE html>
<html>
<head>
<title>Password validation</title>
<meta charset="utf-8" />
<script type="text/javascript">
function validate() {
var form = document.forms["frmRegist"];
var txtPassowrd = form.elements["txtPassword"].value;
var txtCPassowrd = form.elements["txtCPassword"].value;
if (txtPassowrd == "" || txtCPassowrd == "") {
alert("Please, enter the password and confirm password.");
return false;
}
if (txtPassowrd.length < 8) {
alert("Password length must be the 8 character long.");
return false;
}
if (txtPassowrd.length != txtCPassowrd.length) {
alert("Password and Confirm Password must be the same.");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="frmRegist" onsubmit="return validate()">
Password : <input type="password" name="txtPassword" /> *<br /> <br />
Confirm Password: <input type="password" name="txtCPassword" /> *<br /> <br />
<input type="submit" name="btnSubmit" value="Validate" />
</form>
</body>
</html>
Number Validation
We can also check the user entered the numbers only or not.
When we need the input must be the number than we have to do the number validation.
Like the input must be the number and the length of the number must be the 10 for the mobile phone validation.
<!DOCTYPE html>
<html>
<head>
<title>Mobile number validation</title>
<meta charset="utf-8" />
<script type="text/javascript">
function validate() {
var form = document.forms["frmRegist"];
var txtMobileNo = form.elements["txtMobileNo"].value;
if (txtMobileNo == "") {
alert("Please, enter the your mobile no.");
return false;
}
if (isNaN(txtMobileNo)) {
alert("Please, Enter the numbers only.");
return false;
}
if (txtMobileNo.length != 10) {
alert("Mobile number length must be the 10 digit.");
return false;
}
return true;
}
</script>
</head>
<body>
<form name="frmRegist" onsubmit="return validate()">
Mobile Number : <input type="text" name="txtMobileNo" /> *<br />
<input type="submit" name="btnSubmit" value="Validate" />
</form>
</body>
</html>
Email Validation
We can also check the user entered the valid email address or not.
- Valid email address must be have the ‘@’ sign and .(Dot)
- It must be have the at least one character before and after the ‘@’ sign.
- It must be have the at least one character after the .(Dot).
Valid email address example:
admin@www.javascripthive.info
<!DOCTYPE html>
<html>
<head>
<title>Email validation</title>
<meta charset="utf-8" />
<script type="text/javascript">
function validate() {
var form = document.forms["frmRegist"];
var txtEmail = form.elements["txtEmail"].value;
if (txtEmail == "") {
alert("Please, Enter the email address.");
return false;
}
if (!validateEmail(txtEmail)) {
alert("Please, Enter the valid email address.");
return false;
}
return true;
}
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
</script>
</head>
<body>
<form name="frmRegist" onsubmit="return validate()">
Email : <input type="text" name="txtEmail" /> *<br />
<input type="submit" name="btnSubmit" value="Validate" />
</form>
</body>
</html>