10X Sale
kh logo
All Courses
  2. Tutorials
  3. Web Development

Form Validation in Javascript

Updated on Sep 3, 2025
 
8,042 Views

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 field is required" (you can't leave this field blank)
  • "Please enter your phone number in the format xxx-xxxx" (it enforces three numbers followed by a dash, followed by four numbers)
  • "Please enter a valid e-mail address" (if your entry is not in the format of "somebody@example.com")
  • "Your password needs to be between 8 and 30 characters long "

This is called form validation in Javascript

There are two different types of form validation – Client side validation and Server side validations.

  • Javascript Client-side validation is validation that occurs in the browser before the data has been submitted to the server. This can be further subdivided:
  • JavaScript validation is coded using JavaScript. It is completely customizable.
  • Built-in form validation using HTML5 form validation features
  • Javascript Server-side validation is validation which occurs on the server after the data has been submitted. Server-side code is used to validate the data before it is saved into the database

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.

Image

+91

By Signing up, you agree to ourTerms & Conditionsand ourPrivacy and Policy

Get your free handbook for CSM!!
Recommended Courses