Error message in contact form

Question

I have created a contact (4 input text) form and I want if user doesn't text in anyone of input a text message will appear above each input.

Contact From:

<form class="form-horizontal" method="post" action="#" name="form" onsubmit="return validation();">
                <fieldset>
          <div><h2   style="font-family: Myriad Pro;color:#7f8c8c">form</h2></div>

          <div class="form-group">
            <div class="col-sm-8">
             <input id="fname" name="name" type="text" placeholder="Όνομα" class="form-control">
         <div id="error1" style="color:#e8645a"></div>

          </div>
       </div>

        <div class="form-group">
        <div class="col-sm-8">
        <input id="lname" name="surname" type="text" placeholder="Επώνυμο" class="form-control">
        <div id="error2" style="color:#e8645a"></div>
           </div>
       </div>

       <div class="form-group">
        <div class="col-sm-8 ">
         <input id="email" name="email" type="email" placeholder="E-mail" class="form-control">
        <div id="error3" style="color:#e8645a"></div>
         </div>
       </div>

     <div class="form-group">
     <div class="col-sm-10 ">
     <textarea id="message" name="message" type="text" placeholder="Το σχόλιο σας.." columns="7" rows="7" class="form-control" style="background-color:#e5e6e6;" required=""></textarea>
     <div id="error4" style="color:#e8645a"></div>
      </div>
    </div>

    <div class="form-group">
     <div class="col-sm-3 text-center">
      <button type="submit" class="btn btn-primary btn-block" id="label" >SEND</button>
                        </div>

                    </div>

                </fieldset>
            </form>

And the script I use:

function validation(){
            if (document.form.name.value == "") {
                 document.getElementById('error1').innerHTML="*Error Msg1 ";    
            }else if (document.form.surname.value == "") {
                 document.getElementById('error2').innerHTML="*Error Msg2 ";    
            }else if (document.form.email.value == "") {
                 document.getElementById('error3').innerHTML="*Error Msg3 ";    
            }else if (document.form.message.value == "") {
                 document.getElementById('error4').innerHTML="*Error Msg4 ";
            }
            return false;
          }

My issue is that if for example the user doesn't fill his name(error message displayed below the text field) BUT then if he text his name the error message IS still displayed.How can I solve this?

There is an example here: Fiddle

Answer 1

I would suggest that you clear the error message at the start of the validation again:

function validation(){
    document.getElementById('error1').innerHTML=""
    document.getElementById('error2').innerHTML=""
    document.getElementById('error3').innerHTML=""
    document.getElementById('error4').innerHTML=""

    //Your validation code below:
    ...

}

This way whenever the input validates, all of the error messages will be cleared and evaluated again.

You might want to consider storing the labels at the start of the function in a field so you have easy access to them later. This should help with readability as well. For example:

function validation(){
var errorMessage1 = document.getElementById('error1');

//Access the label using your new variable:
errorMessage1.innerHTML = "Your value here"
...

Answer 2

On keyup event lets try resetting the error message

document.form.name.addEventListener("keyup", function(){
    document.getElementById('error1').innerHTML = '';
});