Сообщение об ошибке в контактной форме

Question

Я создал контактную форму (4 ввода текста), и я хочу, чтобы пользователь не вносил текст никому из ввода, над каждым входом будет отображаться текстовое сообщение.

Контакт С:

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

и сценарий я использую:

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; 
      } 

Моя проблема заключается в том, что если, например, пользователь не заполнит отображается его сообщение Имя (ошибка под текстовым полем), НО, если он текст его имя, сообщение об ошибке все еще отображается. Как я могу это решить?

Существует пример здесь: Fiddle

Answer 1

Я хотел бы предложить вам удалить сообщение об ошибке в начале проверки снова:

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

    //Your validation code below: 
    ... 

} 

Таким образом, всякий раз, когда ввод проверяется, все сообщения об ошибках будут очищены и оценены снова.

Возможно, вы захотите рассмотреть возможность хранения меток в начале функции в поле, чтобы у вас был легкий доступ к ним позже. Это также должно помочь в удобочитаемости. Например:

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

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

Answer 2

На KeyUp событие позволяет попробовать сбросить сообщение об ошибке,

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