联系表格中的错误消息

问题描述：

我已经创建了一个联系人（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

答

我会建议你在验证的开始再次清除错误消息：

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

考虑您期望验证的行为。 dinesh的回答将会清除你输入的所有信息，而当用户尝试再次提交表单时，我的信息会清除它们。 – Mfusiki

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

答

在keyup事件让我们尝试重置故障信息

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

联系表格中的错误消息

相关推荐