Xác thực các trường bằng cách sử dụng xác thực JQuery mà không cần gửi bất kỳ?

Question

Tôi có một ứng dụng web HTML5 với nhiều trường do người dùng nhập và tôi muốn thực hiện xác thực phía máy khách trên các trường đó trong javascript trước khi gửi chúng đến máy chủ. Dễ dàng phải không? Chỉ cần sử dụng plugin xác thực JQuery --- http://jqueryvalidation.org/

Nhưng có sự bắt giữ. Ứng dụng web của tôi không có biểu mẫu. Không có trình nào ở bất kỳ đâu trong HTML. Thay vào đó có một trình xử lý thay đổi JQuery trên mọi phần tử có thể thay đổi người dùng và khi người dùng thay đổi giá trị của một trong những phần tử đó, một cuộc gọi AJAX được thực hiện. (Kiến trúc tương tác người dùng không chuẩn này có ý nghĩa đối với ứng dụng này.)

Tôi muốn xác thực trường trước cuộc gọi AJAX và sử dụng plugin xác thực JQuery để thực hiện điều đó. Nhưng tôi không thể hiểu được làm thế nào.

Có thể sử dụng plugin xác thực JQuery mà không cần gửi bất kỳ đâu không? Làm thế nào tôi sẽ làm điều này? Hoặc là một cách tiếp cận tốt hơn?

Answer 1

Thứ nhất, và quan trọng nhất, bạn phải quấn yếu tố đầu vào của bạn bên trong <form></form> thẻ cho các plugin jQuery Validate để hoạt động. Tuy nhiên, không yêu cầu nút gửi.

Thứ hai, bạn có thể kích hoạt kiểm tra tính hợp lệ của bất kỳ hoặc tất cả các thành phần mà không cần nút gửi bằng cách sử dụng the .valid() method.

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin on your form. 
     // rules, options, and/or callback functions 
    }); 

    // trigger validity test of any element using the .valid() method. 
    $('#myelement').valid(); 

    // trigger validity test of the entire form using the .valid() method. 
    $('#myform').valid(); 

    // the .valid() method also returns a boolean... 
    if ($('#myform').valid()) { 
     // something to do if form is valid 
    } 

}); 

DEMO: http://jsfiddle.net/URQGG/

Answer 2

Bạn sẽ phải bao bọc các trường của mình trong một biểu mẫu để sử dụng plugin xác thực và dù sao, nó vẫn là good practice. Ngoài ra, bạn có thể gọi xác nhận của plugin lập trình và kiểm tra xem các hình thức có giá trị bằng cách làm:

var $form = $('#your_form'), 
    validator = $form.validate({...}); 

//validate the form 
validator.form(); 

//check if the form is valid 
if ($form.valid()) { 
    //form is valid 
} 

Đối với tùy chọn hơn, có một cái nhìn tại docs.

Answer 3

tôi đã tạo ra một chút trợ giúp. Chỉ cần thêm dòng mã này và sau đó bạn có thể sử dụng bất kỳ nút nào ở bất kỳ đâu.

$("body [data-submit-form]").on("click", function (event) { 
    $("#" + $(event.target).data('submit-form')).valid(); 
}); 

<form id="component-form"> 

</form> 

<button data-submit-form="component-form">Button</button> 

Giải thích: Các mã jquery lắng nghe tất cả các nhấp chuột vào một phần tử với thuộc tính 'dữ liệu nộp dạng', trong người nghe những dữ liệu thuộc tính được chiết xuất và sau đó tôi kích hoạt các phương pháp hợp lệ về hình thức phù hợp .

Chú ý: nếu bạn muốn gửi biểu mẫu nếu hình thức là sử dụng hợp lệ mã này:

$("body [data-submit-form]").on("click", function (event) { 
    var form = $("#" + $(event.target).data('submit-form')); 
    if (form.valid()) { 
     form.submit(); 
    } 
});