javascript - 即使表单验证失败，表单也会被提交

Question

我正在使用http://www.formvalidator.net/index.html验证我的表单，但即使验证失败，表单也会提交。

表单代码:

<form name="add-todo" class="form-horizontal" action="" method="post">
  <h5>Add New Item</h5>
  <div class="form-group">
    <div class="col-md-12">
      <input type="text" data-validation="required" class="form-control" id="todo-text-input" name="todo-text">
    </div>
  </div>
  <div class="form-group">
    <div class="col-md-12">
      <button type="submit" class="btn btn-primary btn-add">Add</button>
    </div>
  </div>
</form>

jQuery 代码:

$(document).ready(function() {
  $.validate({
    modules: 'security'
  });

  $('form[name=add-todo]').submit(function(e) {
    e.preventDefault();

    var text = $("#todo-text-input").val();
    $('.btn-add').text('Saving ....');

    $.ajax({
      url: this.action,
      type: this.method,
      data: {
        text: text
      },
      success: function(response) {
        $("#todo-text-input").empty();
        $('.messages').removeClass('hide-element');
        $('.alert').addClass('alert-success');
        $('.alert').text('To do item added successfully.');

        $('.alert').fadeTo(2000, 500).slideUp(500, function() {
          $('.alert').slideUp(500);
        });
      }
    });
  });
});

Answer 1

不要使用提交按钮。您可以使用

<button type="button" class="btn btn-primary btn-add">Add</button>

之后检查您的验证状态。如果有效，则提交表格。