Plugin JQuery.Validate có thể ngăn chặn việc gửi biểu mẫu Ajax

Question

Tôi đang sử dụng plugin biểu mẫu JQuery (http://malsup.com/jquery/form/) để xử lý việc gửi biểu mẫu ajax. Tôi cũng có JQuery.Validate (http://docs.jquery.com/Plugins/Validation) được cắm để xác thực phía khách hàng của tôi.

Những gì tôi thấy là xác thực không thành công khi tôi mong đợi nó tuy nhiên nó không ngăn chặn biểu mẫu gửi. Khi tôi đã sử dụng một hình thức truyền thống (tức là không ajax) việc xác nhận không ngăn chặn các hình thức để gửi ở tất cả .... đó là hành vi mong muốn của tôi.

Tôi biết rằng xác thực được nối chính xác vì các thông báo xác thực vẫn xuất hiện sau khi gửi ajax đã xảy ra.

Vì vậy, những gì tôi đang thiếu đang ngăn chặn hành vi mong muốn của tôi? Mẫu mã dưới đây ....

<form id="searchForm" method="post" action="/User/GetDetails"> 
     <input id="username" name="username" type="text" value="user.name" /> 
     <input id="submit" name="submit" type="submit" value="Search" /> 
</form> 
<div id="detailsView"> 
</div> 

<script type="text/javascript"> 
    var options = { 
     target: '#detailsView' 
    }; 
    $('#searchForm').ajaxForm(options); 

    $('#searchForm').validate({ 
    rules: { 
    username: {required:true}}, 
    messages: { 
    username: {required:"Username is a required field."}} 
    }); 
</script> 

Answer 1

Cũng giống như một đường chuyền đầu tiên, tôi tự hỏi tại sao dòng

$("form").validate({ 

không đề cập đến $ ("searchform"). Tôi đã không xem xét điều này, hoặc đã thử nó, nhưng điều đó dường như không phù hợp. Bạn sẽ không muốn gọi xác thực trên biểu mẫu thích hợp?

Dù sao, nếu điều này là hoàn toàn sai, thì lỗi không rõ ràng ngay lập tức. :)

Answer 2

Có thể là trả về false; trên biểu mẫu sẽ trợ giúp? :) Ý tôi là:

<form id="searchForm" method="post" action="/User/GetDetails" onSubmit="return false;"> 

Answer 3

Bạn cần phải thêm một chức năng gọi lại để sử dụng với sự kiện beforeSubmit khi khởi tạo ajaxForm():

var options = { 
     beforeSubmit: function() { 
      return $('#searchForm').validate().form(); 
     }, 
     target: '#detailsView' 
    }; 

Bây giờ nó biết để kiểm tra kết quả của xác nhận trước khi nó sẽ gửi trang.

Answer 4

Cũng đảm bảo tất cả các trường nhập của bạn có thuộc tính "tên" cũng như thuộc tính "id". Tôi nhận thấy plugin xác thực jquery không hoạt động chính xác nếu không có các plugin này.

Answer 5

... cũng đã lâu rồi nên tình hình của tôi đã thay đổi một chút. Hiện tại tôi có một tùy chọn submitHandler được chuyển tới plugin Validate(). Trong trình xử lý đó, tôi sử dụng ajaxSubmit theo cách thủ công. Thêm một cách giải quyết hơn là một câu trả lời tôi đoán. Hy vọng rằng sẽ giúp.

http://jquery.bassistance.de/validate/demo/ajaxSubmit-intergration-demo.html

var v = jQuery("#form").validate({ 
    submitHandler: function(form) { 
     jQuery(form).ajaxSubmit({target: "#result"}); 
    } 
}); 

Answer 6

ok, đây là một câu hỏi cũ nhưng tôi sẽ đưa giải pháp của chúng tôi ở đây cho hậu thế. i cá nhân phân loại này như là một hack-trocity, nhưng ít nhất nó không phải là một hack-Tà Cú-manjaro

<script type="text/javascript"> 
    var options = { 
     target: '#detailsView' 
    }; 

// -- "solution" -- 
$('#searchForm').submit(function(event) { 
    this.preventDefault(event); // our env actually monkey patches preventDefault 
           // impl your own prevent default here 
           // basically the idea is to bind a prevent default 
           // stopper on the form's submit event 
}); 
// -- end -- 

    $('#searchForm').ajaxForm(options); 

    $('#searchForm').validate({ 
     rules: { 
     username: {required:true}}, 
     messages: { 
     username: {required:"Username is a required field."}} 
    }); 
</script> 

Answer 7

$('#contactform').ajaxForm({ 
    success : FormSendResponse, 
    beforeSubmit: function(){ 
    return $("#contactform").valid(); 
    } 
}); 


$("#contactform").validate(); 

Trên đang làm việc tốt cho tôi.