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

Share Improve this question Follow edited Jul 21, 2017 at 18:20 Cœur 38.8k2525 gold badges206206 silver badges279279 bronze badges asked Jul 20, 2015 at 10:28 Maurice GreenlandMaurice Greenland 31522 gold badges55 silver badges2020 bronze badges 2

• 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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...