Hi, today we are going to see how to make a form validation using javascript, it includes email validation, name validation, max-min value validation, string length validation and also phone number validation.
JavaScript Form Validation
We are going to use the set custom message as the required field use to show and for that we will use javascript function setCustomValidity() by the id of the field
and we will make the field focused and also will make the field required dynamically using javascript function focus() and required by the id of the field.
Now start step by step
First, create an HTML document and form with various field with a unique id
<!DOCTYPE html>
<html>
<head>
<title>Javascript Form Validation</title>
<style type="text/css">
input{
width: 250px !important;
}
</style>
</head>
<body>
<form action="" method="post" onsubmit="return on_form_sbmt()">
<input type="number" name="amount" id="id_amount" placeholder="Amount" min="500" max="2500" step="5" required /><br/><br/>
<input type="text" name="full_name" id="id_full_name" placeholder="Full Name" required /><br/><br/>
<input type="text" name="company_name" id="id_company_name" placeholder="Company Name" required /><br/><br/>
<input type="tel" name="phone_no" id="id_phone_no" placeholder="Phone No with country code or 0" required /><br/><br/>
<input type="email" name="email" id="id_email" placeholder="Email Address" required /><br/><br/>
<div id="txtHint" style="color: orange;"></div>
<br/><br/>
<input type="submit" name="form_submit" value="Submit The Form" />
</form>
</body>
</html>
Now To validate a range of value use the below js code
if (amount.value.length == 0 || parseInt(amount.value)<500 || parseInt(amount.value)>2500) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Amount must be between 500 - 2500</p>";
amount.focus();
amount.required=true;
amount.setCustomValidity("Please Fill When Do you Need The Funds");
return false;
}else{
textHint.innerHTML = "";
amount.required=false;
amount.setCustomValidity("");
}
To validate The name as there should be only alfa value with space and should have not any special char use the below code
if (full_name.value.length < 2 || !/^[A-Za-z\s]+$/.test(full_name.value)) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Name Properly</p>";
full_name.focus()
full_name.required=true;
full_name.setCustomValidity("Please Fill Your Name Properly");
return false;
}else{
textHint.innerHTML = "";
full_name.required=false;
full_name.setCustomValidity("");
}
To validate string length use the below code
if (company_name.value.length == 0) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Company Name</p>";
company_name.focus()
company_name.required=true;
company_name.setCustomValidity("Please Fill Your Company Name");
return false;
}else{
textHint.innerHTML = "";
company_name.focus()
company_name.required=false;
company_name.setCustomValidity("");
}
To validate Phone number with 0 of country code as prefix use below javascript code
if (!/^\+?([0]{1})\)?([0-9]{9,10})$/.test(phone_no.value) && !/^\+?([91]{2})\)?([0-9]{9,10})$/.test(phone_no.value) ) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Ph No With +91 Or 0</p>";
phone_no.focus()
phone_no.required=true;
phone_no.setCustomValidity("Please Fill Your Ph No With +91 Or 0");
return false;
}else{
textHint.innerHTML = "";
phone_no.focus()
phone_no.required=false;
phone_no.setCustomValidity("");
}
To validate an email address using below javascript code
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value)) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Email Id Properly</p>";
email.focus()
email.required=true;
email.setCustomValidity("Please Fill Your Email Id Properly");
return false;
}else{
textHint.innerHTML = "";
email.focus()
email.required=true;
email.setCustomValidity("");
}
Now here is the full javascript code to validate a form with phone number with country code and email and, name as there is only character no special or number type character.
now get the below code or try it yourself to test the contact number validation with 0 or country code before the contact number and email address validation and numerical range validation and name field validation where will not be any special character or number, there will be the only character that caps a to z or small a to z and space.
<!DOCTYPE html>
<html>
<head>
<title>Javascript Form Validation</title>
<style type="text/css">
input{
width: 250px !important;
}
</style>
</head>
<body>
<form action="" method="post" onsubmit="return on_form_sbmt()">
<input type="number" name="amount" id="id_amount" placeholder="Amount" min="500" max="2500" step="5" required /><br/><br/>
<input type="text" name="full_name" id="id_full_name" placeholder="Full Name" required /><br/><br/>
<input type="text" name="company_name" id="id_company_name" placeholder="Company Name" required /><br/><br/>
<input type="tel" name="phone_no" id="id_phone_no" placeholder="Phone No with country code or 0" required /><br/><br/>
<input type="email" name="email" id="id_email" placeholder="Email Address" required /><br/><br/>
<div id="txtHint" style="color: orange;"></div>
<br/><br/>
<input type="submit" name="form_submit" value="Submit The Form" />
</form>
<script type="text/javascript">
function on_form_sbmt() {
var amount = document.getElementById("id_amount");
var full_name = document.getElementById("id_full_name");
var company_name = document.getElementById("id_company_name");
var phone_no = document.getElementById("id_phone_no");
var email = document.getElementById("id_email");
var textHint = document.getElementById("txtHint");
if (amount.value.length == 0 || parseInt(amount.value)<500 || parseInt(amount.value)>2500) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Amount must be between 500 - 2500</p>";
amount.focus();
amount.required=true;
amount.setCustomValidity("Please Fill When Do you Need The Funds");
return false;
}else{
textHint.innerHTML = "";
amount.required=false;
amount.setCustomValidity("");
}
if (full_name.value.length < 2 || !/^[A-Za-z\s]+$/.test(full_name.value)) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Name Properly</p>";
full_name.focus()
full_name.required=true;
full_name.setCustomValidity("Please Fill Your Name Properly");
return false;
}else{
textHint.innerHTML = "";
full_name.required=false;
full_name.setCustomValidity("");
}
if (company_name.value.length == 0) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Company Name</p>";
company_name.focus()
company_name.required=true;
company_name.setCustomValidity("Please Fill Your Company Name");
return false;
}else{
textHint.innerHTML = "";
company_name.focus()
company_name.required=false;
company_name.setCustomValidity("");
}
if (!/^\+?([0]{1})\)?([0-9]{9,10})$/.test(phone_no.value) && !/^\+?([91]{2})\)?([0-9]{9,10})$/.test(phone_no.value) ) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Ph No With +91 Or 0</p>";
phone_no.focus()
phone_no.required=true;
phone_no.setCustomValidity("Please Fill Your Ph No With +91 Or 0");
return false;
}else{
textHint.innerHTML = "";
phone_no.focus()
phone_no.required=false;
phone_no.setCustomValidity("");
}
if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email.value)) {
textHint.innerHTML = "<p style='color:red;font-size: 18px;'>Please Fill Your Email Id Properly</p>";
email.focus()
email.required=true;
email.setCustomValidity("Please Fill Your Email Id Properly");
return false;
}else{
textHint.innerHTML = "";
email.focus()
email.required=true;
email.setCustomValidity("");
}
return true;
}
</script>
</body>
</html>
In this post we have learned how to make a form validation using javascript, it includes email validation, name validation, max-min value validation, string length validation and also phone number validation. Please comment below to make the sitter better and more useful.
Thanks for Reading