when I submit a form with errors (for example user has not pleted 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;

when I submit a form with errors (for example user has not pleted 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;

• javascript
• forms

• 1 Your alphaRegEx is wrong, it validates only first symbol, regex should be /^[a-zA-Z]+$/ – sbedulin Commented Jul 20, 2015 at 10:38
• You really need to stop ment the closing braces with "close if", "close function" etc. as they are useless. – Viktor Bahtev Commented Jul 20, 2015 at 11:34

2 Answers 2

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.

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...