聯繫表格中的錯誤消息

我已經創建了一個聯繫人（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; 
      }

我的問題是，例如，如果用戶不填寫顯示他的名字（錯誤信息在文本字段下面）但是如果他給他的姓名寫錯誤信息IS仍然顯示。我該如何解決這個問題？

這裏有一個例子：Fiddle

來源

2016-07-01 platanas20

我會建議你在驗證的開始再次清除錯誤消息：

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

來源

2016-07-01 10:26:23 Mfusiki

考慮您期望驗證的行爲。 dinesh的回答將會清除你輸入的所有信息，而當用戶嘗試再次提交表單時，我的信息會清除它們。 – Mfusiki

非常感謝。很好，謝謝！ – platanas20

在keyup事件讓我們嘗試重置故障信息

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

來源

2016-07-01 10:26:12 dinesh

聯繫表格中的錯誤消息

回答

相關問題