Xác thực biểu mẫu trên sự kiện Nhấp với trình xác thực jQuery

Question

Tôi đang sử dụng jQuery xác thực để xác thực một đầu vào. Mã của tôi:

$('#button').click(function() {  
    $("#form").validate({    
     rules: { 
      phone: { 
       required: true, 
       number: true, 
       rangelength: [7, 14] 
      } 
     } 
    }); 
}); 

Và HTML:

<form id="form" name="form" method="post" action=""> 
<input id="phone" name="phone" class="required" type="text" /> 
<div class="button" id="send_b">Send</div> 
</form> 

Mã này không hoạt động. Nếu tôi thêm dòng này của jQuery

$("#form").submit(); 

bên trong sự kiện nhấp chuột hoạt động. Nhưng tôi không muốn gửi biểu mẫu vì vậy tôi chỉ muốn thực hiện xác thực khi nhấp chuột.

Có ai biết cách thực hiện việc này không?

Answer 1

Chỉ cần thêm .form() tự kích hoạt các xác nhận ngay lập tức (hành vi mặc định đợi cho một sự kiện nộp):

$('#button').click(function() {  
    $("#form").validate({    
    rules: { 
     phone: { 
     required: true, 
     number: true, 
     rangelength: [7, 14] 
     } 
    } 
    }).form(); 
}); 

Answer 2

Mã của bạn được ràng buộc một chức năng để sự kiện click của một nút. Những gì bạn đang làm là nói "khi nhấn nút này, hãy áp dụng xác thực biểu mẫu cho biểu mẫu".

Đây là cách không chính xác để sử dụng plugin xác thực (Tôi giả sử bạn đang sử dụng this plugin xác thực). Thay vào đó, bạn chỉ cần thực hiện phương thức validation() trực tiếp vào phần tử form; plugin sẽ xử lý sự kiện submit.

Vì vậy, hãy loại bỏ ràng buộc sự kiện click.

Answer 3

Sử dụng phương thức tạo hình thức form() với sự kiện nhấp của bạn