Making a simple JavaScript form validator

By Faruque Ahamed Mollick

In this tutorial, we are going to make a simple JavaScript form validator which will be used to prevent form submission if any one of the form input fields is empty.

The HTML

Before we go forward let’s create an HTML form:

<form name="subscribForm" action="action_page.php" onsubmit="return validateForm()" method="post">
  
  Full Name: <span id="fnameValidError" style="color: red;"></span><br/> 
  <input type="text" name="fullname" id="fullname"><br/>
  
  Phone number: <span id="phoneValidError" style="color: red;"></span><br/>
   <input type="text" name="phone" id="phone"><br/>
  <input type="submit" value="Submit">
  
</form>

In the above HTML form, you can see that we have taken two HTML span tag with the ids fnameValidError and phoneValidError. We have not put any content inside these span tags. It is now blank. But we are going to show the error message when the input fields are blank.

Live word counter from HTML textarea in JavaScript

Show live preview of HTML textarea with JavaScript

You can see that in the form tag, we have called a JavaScript function on submitting the form which you can see as onsubmit=”return validateForm()”. This is one kind of rules of calling the JavaScript function on submitting the form.

The JavaScript code

Now we need the JavaScript code which will prevent from form submission if it finds anyone or both input fields are empty.

Below is the JavaScript code:

function validateForm() {
    var fullname = document.forms["subscribForm"]["fullname"].value;
    var phone = document.forms["subscribForm"]["phone"].value;

    if (fullname == "") {
        alert("Email must be filled out");
        document.getElementById('fnameValidError').innerHTML = "You must have to provide email";
        document.getElementById('fullname').style.border = "solid 1px red";
        return false;
    } else {
    	    document.getElementById('fnameValidError').innerHTML = "";
    	    document.getElementById('fullname').style.border = "solid 1px #a9a9a9";
    }

    if (phone == "") {
        alert("Email must be filled out");
        document.getElementById('phoneValidError').innerHTML = "You must have to provide phone number";
        document.getElementById('phone').style.border = "solid 1px red";
        return false;
    } else {
    	   document.getElementById('phoneValidError').innerHTML = "";
    	   document.getElementById('phone').style.border = "solid 1px #a9a9a9";
    }

}

The above JavaScript code will give the form validation feature to the HTML form. When any one of the input fields will found blank in the time of pressing the submit button, it will show the form validation error message with the red border.

Also, getting the validation error message when we will resubmit the form by putting a value, it will change the border color with a different one which means the form is not blank and the error message will also be removed.

Play/Pause Button For HTML5 Video Using JavaScript

How to get value from input box in JavaScript?

Now our form validator is working nicely. We have made a simple JavaScript form validator which is working just a simple form validator should work.


So how was that? Is that not simpler than you were thinking? I hope you like the code snippets that we have discussed in this tutorial.

Leave a Reply

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