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>

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

Answer 2

<input type="text" data-validation="required" class="form-control" id="todo-text-input" name="todo-text">

在输入字段中，您不需要使用data-validation =“required”，只需使用必需的

＆LT; input type="text" required class="form-control" id="todo-text-input" name="todo-text">

Answer 3

请更改您的表单验证码配置：

$.validate({
    form : '#registration-form',
    modules : 'security',
    onSuccess : function($form) {
      alert('The form '+$form.attr('id')+' is valid!');
       // write your ajax code to submit form data on server
      return false; // Will stop the submission of the form
    }
  });

欲了解更多信息，请访问：

http://www.formvalidator.net/index.html#configuration

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

3 个答案: