为什么我提交表单时会出现一个空的错误框,即使它已经过验证?

时间:2018-01-11 10:40:57

标签: jquery twitter-bootstrap forms twitter-bootstrap-3 jquery-validate

我有一个表单,我通过Ajax使用jQuery加载。我也使用jQuery Validation来验证输入。当用户在输入字段中输入有效数据时,单击该按钮时,它会在输入下方显示红色错误框,其中没有文本。输入使用bootstrap输入组。该表单还使用jQuery验证插件通过Ajax提交表单。 以下是我用来验证的代码:

$(document.body).on('click', '#submit-form-button', function() {
  $("#form1").validate({
    submitHandler: function(form) {
      // Loading State
      var submitButton = $('#submit-form-button');
      submitButton.button("loading");
      // Ajax Submit
      $.ajax({
        type: "POST",
        url: "submit-form.php",
        data: {
          "input1": $("#form1 #input1").val(),
        },
        dataType: "json",
        success: function(data) {
          if (data.response == "success") {
            //SHOW SUCCESS
            // Reset Form
            $("#form1 .form-control")
              .val("")
              .blur()
              .parent()
              .removeClass("has-success")
              .removeClass("has-error")
              .find("label.error")
              .remove();
          } else {
            //SHOW ERROR
          }
        },
        error: function(data) {
          console.log(data);
        },
        complete: function() {
          submitButton.button("reset");
        }
      });
    },
    rules: {
      input1: {
        required: true,
        email: true
      }
    },
    highlight: function(element, errorClass) {
      // Do nothing
    },
    success: function(element) {
      $(element)
        .parent()
        .removeClass("has-error")
        .removeClass("alert")
        .removeClass("alert-danger")
        .addClass("has-success")
        .find("label.error")
        .remove();
    },
    errorPlacement: function(error, element) {
      if (element.parent('.input-group').length || element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
        error.insertAfter(element.parent());
      } else {
        error.insertAfter(element);
      }
    },
    errorElement: "div",
    errorClass: "alert alert-danger"
  });
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/additional-methods.min.js"></script>
<form id="form1" method="post" action="submit-form.php">
  <div>
    <label class="control-label sr-only" for="input1">Input 1</label>
    <div class="input-group input-group-lg">
      <input type="email" class="form-control" id="input1" name="input1" placeholder="Enter Your Email Address">
      <span class="input-group-btn">
				    <button class="btn btn-blue" type="submit" id="submit-form-button" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> SENDING">SEND</button>
                </span>
    </div>
  </div>
</form>

0 个答案:

没有答案