JavaScript Form Validation with email , phone number and name.

Hi, today we are going to see how to make a form validation using javascript , it includes email validation , name valisation, max min value validation, string lenght validation and also phone number validation.

JavaScript Form Validation

JavaScript Form Validation

We are going to use 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 a html document and form with verious field with unic 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 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 shuld 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 lenght 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 email address use 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 ir yourself to test the contact number validation with 0 or country code before the contact number and email address validation and numarival range validation and name field validation where will not be any special character or number, there will be only character that is caps a to z or small a to z and space.

Try It Yourself

<!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 valisation, max min value validation, string lenght validation and also phone number validation. Please comment below to make the sitter better and more usefull.

Thanks for Reading

Share The Post On -

Add a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.