Question

我有一份包含验证的联系表格。一切都很好，但我只有一个问题。在另一次提交表单时，旧的显示错误不会消失。

以下是我使用javascript的文档的一部分：

<form  id="contactForm" th:action="@{/contact}" th:method="POST" entype="utf8"  >
<label   class="form-control-label on-fonts-style display-7" >Name</label>
<input type="text" value="" class="form-control" placeholder="full name" name="fullName" required="required" >

<label  class="form-control-label on-fonts-style display-7" >Email</label> 
<input type="email" class="form-control" placeholder="Email Address" 
name="email" value="" required="required">
<span id="emailError" style="color:#F41F0E"></span>

<label   class="form-control-label on-fonts-style display-7" >Phone</label>
<input type="tel" class="form-control" name="phone" placeholder="phone" 
value="">

<label   class="form-control-label on-fonts-style display-7" >Message</label>
<textarea type="text" class="form-control" name="message" rows="7"> 
</textarea>
<span id="messageError" style="color:#F41F0E"></span>

<span id="globalError" class="alert alert-danger col-sm-4" 
style="display:none" ></span>

<button type="submit" name="submit" class="btn btn-primary btn-form display- 
4">SEND FORM</button>
</form>

<script 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script th:inline="javascript">
var serverContext = [[@{/}]];

  $(document).ready(function () {       
      $('form').submit(function(event) {

    registerContact(event);

      });
});
function registerContact(event){

event.preventDefault();
$(".alert").html("").hide();
$(".error-list").html("");


var formData= $('form').serialize();
$.post(serverContext + "contact",formData ,function(data){


  if(data.message == "success"){
      window.location.href = serverContext + "successContact.html";
    }
})

.fail(function(data) {
  if(data.responseJSON.error.indexOf("MailError") > -1)
  {
      window.location.href = serverContext + "emailError.html";
  }
  else if(data.responseJSON.error.indexOf("InternalError") > -1){
      window.location.href = serverContext + "login?message=" + data.responseJSON.message;
  }
  else{
    var errors = $.parseJSON(data.responseJSON.message);
      $.each( errors, function( index,item ){
          $("#"+item.field+"Error").show().html(item.defaultMessage);
      });
      errors = $.parseJSON(data.responseJSON.error);
      $.each( errors, function( index,item ){
          $("#globalError").show().append(item.defaultMessage+"<br/>");
      });
  }
});
}
</script>

让我解释一下：我有两个验证（关于消息和电子邮件），所以如果我输入错误，则会出现两个错误。但是，如果我修复了其中一个并再次提交，那么旧错误仍然存在。即使我将它们都修好并提交表格，表格也会提交，但仍会显示错误。

请有人为此问题找到解决方案吗？

Answer 1

为名为error的所有错误范围添加一个类作为示例。

当您进入错误检查部分时，您可以先隐藏所有错误

$(".error").hide()

然后继续正常验证：）

即使在使用javascript输入正确的值后，html表单仍显示验证错误

1 个答案: