All real-world sites have one form or the other. If you go to any popular site with a registration form, and you will notice that they give you feedback when you don't enter your data in the format they are expecting. You'll get messages such as:
This is called form validation in Javascript
There are two different types of form validation – Client side validation and Server side validations.
We will be looking into JavaScript form validations here since it’s a JavaScript tutorial. We will look at the form validation examples in Javascript. Here we have a simple HTML form, with Name, Email, Telephone and Address check.
We have all our form validations done inside <script> tag, which contains our JavaScript. Here we are selecting each input box and performing our validations on it. The Name, Telephone and Address check are quite straight forward and only checks if they are empty. If they are empty it will show an alert box with an appropriate message. The email value has additional checks because it checks for the string to contain “@” and “.” also..
<html>
<head>
<script>
function validateForm() {
var name = document.forms["RegForm"]["Name"];
var email = document.forms["RegForm"]["EMail"];
var phone = document.forms["RegForm"]["Telephone"];
var address = document.forms["RegForm"]["Address"];
if (name.value == "") {
window.alert("Please enter your name.");
name.focus();
return false;
}
if (address.value == "") {
window.alert("Please enter your address.");
name.focus();
return false;
}
if (email.value == "") {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf("@", 0) < 0) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (email.value.indexOf(".", 0) < 0) {
window.alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if (phone.value == "") {
window.alert("Please enter your telephone number.");
phone.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<h1> REGISTRATION FORM </h1>
<form name="RegForm" action="#" onsubmit="return validateForm()">
<p>Name: <input type="text" name="Name"> </p><br>
<p> Address: <input type="text" name="Address"> </p><br>
<p>E-mail Address: <input type="text" name="EMail"> </p><br>
<p>Telephone: <input type="text" name="Telephone"> </p><br>
<p><input type="submit" value="Submit" name="Submit">
</p>
</form>
</body>
</html>Save the above code in a .html file and open in any web browser. It will show the below webpage. Submit without filling any field and you will get an error in an alert box.
I have learned many things from this article. It is beneficial for me. Thank you!
Nice example for beginners.. I m a beginner so this is very helpful for me ... so plz give this type of beginners example..
This is a great introduction to variables in JavaScript! As a beginner to JavaScript, I found this guide very helpful in understanding the basics of variables and how they are used in JavaScript.
Thanks for sharing the information, it is very helpful, I hope to get more such beautiful blogs from you.
You have shared great information with me i appreciate your work!
Build various types of web applications,command-line application,etc....
Introduction: Angular (What is Angular?)Angular was formerly introdu...
Leave a Reply
Your email address will not be published. Required fields are marked *