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

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

在你输入字段，你不需要使用数据验证=“要求”只是使用需要像

< 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