聯系表格中的錯誤消息

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

我的問題是，例如，如果用戶未填寫用戶名（錯誤消息顯示在文本字段下方），但是如果用戶輸入自己的名字，錯誤消息仍會顯示。如何解決此問題？

這里有一個例子： 小提琴

Answer 1

在keyup事件上，讓我們嘗試重置錯誤消息

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

Answer 2

我建議您在驗證開始時再次清除錯誤消息：

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