即使表單驗證失敗，表單也會被提交

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