CODEWITHSUNDEEP
javascriptforms
Maurice Greenland
Maurice Greenland

Reputation: 315

Javascript: Form Validation - Remove error messages from corrected fields

when I submit a form with errors (for example user has not completed a required field) I am able to display the error messages. However, If I correct one of the fields and submit again BOTH error messages remain.

The errors only go when ALL fields are correctly filled in.

What have I done wrong?

If i correct a field and click submit I eant the error message for the corrected field to go away and only the remining incorrect fields to have error messages.

HTML:

   <form id="frm1">
   <fieldset id="controls">
    <div>
      <label for="firstname">First Name: </label>
       <input type="text" id="firstname">
        <span id="errFname" class="errmsg">&#42 You must enter a first name</span>
    </div>
    <div>
       <label for="lastname">Last Name: </label>
       <input type="text" id="lastname">
        <span id="errLname" class="errmsg">&#42 You must enter a first name</span>
    </div>
    <div>
      <input type="submit" value="Submit">
    </div>
    </fieldset>
   </form>

SCRIPT:

function checkForm(){



    document.getElementById("frm1").addEventListener("submit", function(e) {

        var errors = [];


        //Validate first name: Required, Alphabetic (no numbers)
        if(document.getElementById("firstname").value === "") {

            document.getElementById("errFname").style.display = "inline";
            document.getElementById("firstname").focus();

            errors.push("required");

        }//close if


        var alphaRegEx = /^[a-zA-Z]+$/;;
        var alphafname = document.getElementById("firstname").value;
        var alphalname = document.getElementById("lastname").value;

        //check if first name has any digits
        if (!alphaRegEx.test(alphafname)){

            document.getElementById("errFname").style.display = "inline";
            document.getElementById("firstname").value="";
            document.getElementById("firstname").focus();

            errors.push("numeric");


        }//close if

        //check if last name has any digits
        if (!alphaRegEx.test(alphalname)){

            document.getElementById("errLname").style.display = "inline";
            document.getElementById("lastname").value="";
            document.getElementById("lastname").focus();

            errors.push("numeric");


        }//close if

        //If you want, you can do something with your errors, if not, just return
        if (errors.length > 0) {
            e.preventDefault();
            return false;
        }
        return true;

    });//close function



}//close function (checkForm)


window.onload=checkForm;

Upvotes: 2

Views: 10661

Answers (2)

Nikhil Batra
Nikhil Batra

Reputation: 3148

You must first clear all the errors when the checkForm is called.

function checkForm() {
    clearErrors();

    Rest functionality same...
}

function clearErrors() {
    Array.prototype.forEach.call(
        document.getElementsByClassName("errmsg"),
        function(el) { el.style.display = "none"; }
    );
}

This will clear all the errors first and then display only those errors which have not yet been resolved.

Upvotes: 2

Maurice Greenland
Maurice Greenland

Reputation: 315

The solution was set each error message display property to 'none' before going through the validation. 

function checkForm() {

        //Event listener
        document.getElementById("contactForm").addEventListener("submit", function(prevent) {

//Set display property for inline error messages to none
            document.getElementById("errFname").style.display = 'none';
            document.getElementById("errLname").style.display = 'none';

//Rest of code remains the same...

Upvotes: 0

Related Questions