Plugin xác thực jQuery: vô hiệu hóa xác thực cho các nút gửi được chỉ định

Tôi có một biểu mẫu với nhiều trường mà tôi đang xác thực (một số có các phương thức được thêm vào để xác thực tùy chỉnh) với plugin Xác thực jQuery tuyệt vời của Jörn Zaeffere. Làm thế nào để bạn phá vỡ xác nhận với các điều khiển gửi được chỉ định (nói cách khác, xác thực cháy với một số đầu vào gửi, nhưng không kích hoạt xác thực với những người khác)? Điều này sẽ tương tự như Nhóm xác thực với các điều khiển trình xác nhận ASP.NET tiêu chuẩn.

Hoàn cảnh của tôi:

Đó là với ASP.NET WebForms, nhưng bạn có thể bỏ qua điều đó nếu muốn. Tuy nhiên, tôi đang sử dụng xác thực nhiều hơn dưới dạng "đề xuất": nói cách khác, khi biểu mẫu được gửi, xác thực sẽ kích hoạt nhưng thay vì hiển thị thông báo "bắt buộc", "đề xuất" hiển thị có nội dung "bạn" bỏ lỡ các trường sau .... bạn có muốn tiếp tục không? " Tại thời điểm đó trong bộ chứa lỗi, có một nút gửi khác hiện rõ có thể được nhấn, có thể bỏ qua xác nhận và gửi mọi cách. Làm cách nào để phá vỡ các biểu mẫu .validate () cho nút điều khiển này và vẫn đăng?

Mẫu Mua và Bán một ngôi nhà tại http://jquery.bassistance.de/validate/demo/multipart/ cho phép điều này để đạt được các liên kết trước đó, nhưng nó thực hiện thông qua việc tạo các phương thức tùy chỉnh và thêm nó vào trình xác nhận. Tôi muốn không phải tạo các phương thức tùy chỉnh sao chép chức năng đã có trong plugin xác thực.

Sau đây là phiên bản rút gọn của tập lệnh áp dụng ngay lập tức mà tôi có ngay bây giờ:

var container = $("#<%= Form.ClientID %> div.validationSuggestion");

$('#<%= Form.ClientID %>').validate({          
    errorContainer: container,
    errorLabelContainer: $("ul",container),
    rules: {
        <%= YesNo.UniqueID %>: { required: true },
        <%= ShortText.UniqueID %>: { required: true } // etc.

    },
    messages: {
        <%= YesNo.UniqueID %>: 'A message.',
        <%= ShortText.UniqueID %>: 'Another message.' // etc.
    },
    highlight: function(element, errorClass) {
        $(element).addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass("valid");
    },
    unhighlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").removeClass(errorClass);
        $(element.form).find("label[for=" + element.id + "]").addClass("valid");
    },
    wrapper: 'li'
}); 

Bạn có thể thêm một lớp CSS cancelvào nút gửi để ngăn chặn xác thực

ví dụ

<input class="cancel" type="submit" value="Save" />

Xem tài liệu Trình xác thực jQuery của tính năng này tại đây: Bỏ qua xác thực khi gửi

CHỈNH SỬA :

Các kỹ thuật trên đã bị phản đối và thay thế bằng formnovalidatethuộc tính.

<input formnovalidate="formnovalidate" type="submit" value="Save" />

Cách khác (không có giấy tờ) để làm điều đó, là gọi:

$("form").validate().cancelSubmit = true;

vào sự kiện nhấn nút (ví dụ).

Một cách khác (năng động):

$("form").validate().settings.ignore = "*";

Và để kích hoạt lại nó, chúng tôi chỉ cần đặt lại giá trị mặc định:

$("form").validate().settings.ignore = ":hidden";

Nguồn: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

Thêm thuộc tính formnovalidate vào đầu vào

    <input type="submit" name="go" value="Submit"> 
    <input type="submit" formnovalidate name="cancel" value="Cancel"> 

Thêm lớp = "hủy" hiện không được chấp nhận

Xem tài liệu để bỏ qua xác thực khi gửi trên liên kết này

Bạn có thể sử dụng tùy chọn onsubmit: false (xem tài liệu ) khi kết nối xác thực sẽ không xác thực khi gửi biểu mẫu. Và sau đó trong nút asp: thêm một OnClientClick = $ ('# aspnetForm'). Hợp lệ (); để kiểm tra rõ ràng nếu hình thức là hợp lệ.

Bạn có thể gọi đây là mô hình chọn tham gia, thay vì mô hình từ chối được mô tả ở trên.

Lưu ý, tôi cũng đang sử dụng xác thực jquery với ASP.NET WebForms. Có một số vấn đề để điều hướng nhưng một khi bạn vượt qua chúng, trải nghiệm người dùng là rất tốt.

(Gia hạn @lepevà @redsquaretrả lời cho ASP.NET MVC+ jquery.validate.unobtrusive.js)

Các jquery validation Plugin (không phải là Microsoft không phô trương một) cho phép bạn đặt một .cancellớp trên nút gửi của bạn để xác nhận bỏ qua hoàn toàn (như trong câu trả lời được chấp nhận).

 To skip validation while still using a submit-button, add a class="cancel" to that input.

  <input type="submit" name="submit" value="Submit"/>
  <input type="submit" class="cancel" name="cancel" value="Cancel"/>

(đừng nhầm lẫn điều này với type='reset'một cái gì đó hoàn toàn khác)

Thật không may, mã jquery.validation.unobtrusive.jsxử lý xác thực (ASP.NET MVC) làm hỏng hành vi mặc định của plugin jquery.validate .

Đây là những gì tôi nghĩ ra để cho phép bạn đặt .cancelnút gửi như hình trên. Nếu Microsoft đã từng 'sửa lỗi' này thì bạn chỉ có thể xóa mã này.

    // restore behavior of .cancel from jquery validate to allow submit button 
    // to automatically bypass all jquery validation
    $(document).on('click', 'input[type=image].cancel,input[type=submit].cancel', function (evt)
    {
        // find parent form, cancel validation and submit it
        // cancelSubmit just prevents jQuery validation from kicking in
        $(this).closest('form').data("validator").cancelSubmit = true;
        $(this).closest('form').submit();
        return false;
    });

Lưu ý: Nếu lần đầu thử, có vẻ như điều này không hoạt động - hãy đảm bảo bạn không quay vòng đến máy chủ và thấy trang được tạo bởi máy chủ có lỗi. Bạn sẽ cần phải bỏ qua xác thực ở phía máy chủ bằng một số phương tiện khác - điều này chỉ cho phép biểu mẫu được gửi phía khách hàng mà không có lỗi (phương án thay thế sẽ là thêm .ignorethuộc tính cho mọi thứ trong biểu mẫu của bạn).

(Lưu ý: bạn có thể cần thêm buttonvào bộ chọn nếu bạn đang sử dụng các nút để gửi)

$("form").validate().settings.ignore = "*";

Hoặc là

$("form").validate().cancelSubmit = true;

Nhưng không thành công trong một trình xác nhận yêu cầu tùy chỉnh. Để gọi một cách linh hoạt, tôi đã tạo một nút gửi ẩn giả với mã này:

var btn = form.children('input.cancel.fakeSubmitFormButton');
if (btn.length === 0) {
    btn = $('<input name="FakeCancelSubmitButton" class="cancel fakeSubmitFormButton hide" type="submit" formnovalidate value="FakeCancelSubmitButton" />');
    form.append(btn);
}
btn.click();

Bây giờ bỏ qua xác nhận chính xác :)

Câu hỏi này đã cũ, nhưng tôi đã tìm thấy một cách khác để sử dụng $('#formId')[0].submit(), đó là lấy phần tử dom thay vì đối tượng jQuery, do đó bỏ qua mọi móc nối xác nhận. Nút này gửi biểu mẫu cha có chứa đầu vào.

<input type='button' value='SubmitWithoutValidation' onclick='$(this).closest('form')[0].submit()'/>

Ngoài ra, đảm bảo bạn không có bất kỳ inputtên "trình" nào, hoặc nó ghi đè chức năng được đặt tên submit.

Tôi thấy rằng cách linh hoạt nhất là sử dụng JQuery:

event.preventDefault():

Ví dụ: nếu thay vì gửi tôi muốn chuyển hướng, tôi có thể làm:

$("#redirectButton").click(function( event ) {
    event.preventDefault();
    window.location.href='http://www.skip-submit.com';
});

hoặc tôi có thể gửi dữ liệu đến một điểm cuối khác (ví dụ: nếu tôi muốn thay đổi hành động):

$("#saveButton").click(function( event ) {
    event.preventDefault();
    var postData = $('#myForm').serialize();
    var jqxhr = $.post('http://www.another-end-point.com', postData ,function() {
    }).done(function() {
        alert("Data sent!");
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alert("Ooops, we have an error");
    })

Khi bạn thực hiện 'event.preventDefault ();' bạn bỏ qua xác nhận.

Tôi có hai nút để gửi biểu mẫu, nút có tên lưu và thoát bỏ qua xác thực:

$('.save_exist').on('click', function (event) {
            $('#MyformID').removeData('validator');
            $('.form-control').removeClass('error');
            $('.form-control').removeClass('required');                
            $("#loanApplication").validate().cancelSubmit = true;
            $('#loanApplication').submit();
            event.preventDefault();
});

Đây là phiên bản đơn giản nhất, hy vọng nó sẽ giúp được ai đó,

$('#cancel-button').click(function() {
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
});