How to Handling and Validating HTML Forms in JavaScript – Tutorial

arp14 HTML, JavaScript, Tutorial Tags: , , , , , , 0

In this tutorial we are validating HTML forms with JavaScript. This JavaScript tutorial is only about client side form validation.

Handling and validating forms in JavaScript is quite easy. We are going to validate a simple HTML form via JavaScript from client side only. Make sure to re-validate the form through server side too as we can’t relay only on client side validation –┬ávalidating forms on client side is just for better user friendliness.

Handling and Validating HTML Forms in JavaScript

Required Files Handling and Validating Forms

simple_form.html

<html>
    <head>
        <title>Simple HTML Form Validation</title>
		<script type="text/javascript" src="form.js"></script>
    </head>
    <body>
        <form action="simple_form.html" method="get" id="reg_form">
            Name: <input type="text" name="name" id="name"/><br />
            Email: <input type="text" name="email" id="email"/><br />
            Phone: <input type="text" name="phone" id="phone"/><br />
            Password: <input type="password" name="password" id="password"/><br />
            Confirm Password: <input type="password" name="confirm_password" id="confirm_password"/><br />
            <input type="submit" name="submit" value="Register" />
        </form>
	<p>note: Name and passwords 3 to 20 chars long, email must be valid and phone must be 10 digits numeric.</p>
    </body>
</html>

Now, to validating forms, we’ll use the following JavaScript.

form.js

window.onload = function () { // calling a stanalone function on window.onload event
	var allok = true; // initializing allok as true	

	// getting particular form then onsubmit calling a standalone function
	document.getElementsByTagName("form")[0].onsubmit = function () {
		// taking and storing each inputs after submit
		var name = document.getElementById("name").value;
		var email = document.getElementById("email").value;
		var phone = document.getElementById("phone").value;
		var password = document.getElementById("password").value;
		var confirm_password = document.getElementById("confirm_password").value;
		var error = ""; // initializing error as blank
                // validating forms start here
		if (name.length <= 3 || name.length >= 20) {
			error += "\n\rInvalid Name.";
			allok = false;
		}
		if (checkEmail(email) == false) {
			error += "\n\rInvalid Email.";
			allok = false;
		}
		if (isNaN(phone) || phone.length > 10 || phone.length < 8) {
			error += "\n\rInvalid Phone.";
			allok = false;
		}
		if (password.length <= 3 || password.length >= 20) {
			error += "\n\rInvalid Password.";
			allok = false;
		}
		if (password != confirm_password) {
			error += "\n\rConfirm password did not matched..";
			allok = false;
		}

		// if allok is false, prevent submitting the form
		if (allok == false) {
			alert(error);
			return false;
		}
	}

	function checkEmail(inputvalue){ // cheching for invalid email
		var pattern=/^([a-zA-Z0-9_.-])[email protected]([a-zA-Z0-9_.-])+\.([a-zA-Z])+([a-zA-Z])+/;
		if(pattern.test(inputvalue)) return true;
		else return false;
	}
}

Having problems with validating forms? Need help? Just comment below, I’ll be back to you.

Thank you!

Leave a Reply

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