Plugin jQuery Validation: nonaktifkan validasi untuk tombol kirim yang ditentukan

Saya memiliki formulir dengan beberapa bidang yang saya validasi (beberapa dengan metode yang ditambahkan untuk validasi khusus) dengan plugin jQuery Validation yang sangat baik dari Jörn Zaeffere. Bagaimana Anda menghindari validasi dengan kontrol pengiriman yang ditentukan (dengan kata lain, memvalidasi validasi dengan beberapa input input, tetapi jangan memecat validasi dengan yang lain)? Ini akan mirip dengan ValidationGroups dengan kontrol validator ASP.NET standar.

Situasi saya:

Ini dengan ASP.NET WebForms, tetapi Anda bisa mengabaikannya jika mau. Namun, saya menggunakan validasi lebih sebagai "rekomendasi": dengan kata lain, ketika formulir dikirimkan, validasi akan ditampilkan tetapi alih-alih menampilkan pesan "wajib", "rekomendasi" menunjukkan yang mengatakan sesuatu di sepanjang baris "Anda" merindukan bidang berikut .... apakah Anda ingin melanjutkan? Pada titik itu di wadah kesalahan ada tombol kirim lain sekarang terlihat yang dapat ditekan yang akan mengabaikan validasi dan mengirim lagian. Bagaimana cara menghindari formulir .validate () untuk kontrol tombol ini dan masih memposting?

Sampel Beli dan Jual Rumah di http://jquery.bassistance.de/validate/demo/multipart/ memungkinkan ini untuk mencapai tautan sebelumnya, tetapi ia melakukannya dengan membuat metode khusus dan menambahkannya ke validator. Saya lebih suka tidak harus membuat fungsionalitas duplikasi metode kustom yang sudah ada di plugin validasi.

Berikut ini adalah versi singkat dari skrip yang langsung berlaku yang saya miliki sekarang:

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'
}); 

Anda dapat menambahkan kelas CSS cancelke tombol kirim untuk menekan validasi

misalnya

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

Lihat dokumentasi Validator jQuery untuk fitur ini di sini: Melewati validasi saat kirim

EDIT :

Teknik di atas telah usang dan diganti dengan formnovalidateatribut.

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

Cara lain (tidak berdokumen) untuk melakukannya, adalah menelepon:

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

pada acara klik tombol (misalnya).

Cara lain (dinamis):

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

Dan untuk mengaktifkannya kembali, kami hanya mengatur kembali nilai default:

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

Sumber: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

Tambahkan atribut formnovalidate ke input

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

Menambahkan class = "cancel" sekarang sudah tidak digunakan lagi

Lihat dokumen untuk Melewati validasi saat mengirim pada tautan ini

Anda dapat menggunakan opsi onsubmit: false (lihat dokumentasi ) saat memasang validasi yang tidak akan divalidasi saat penyerahan formulir. Dan kemudian di tombol asp: tambahkan OnClientClick = $ ('# aspnetForm'). Valid (); untuk secara eksplisit memeriksa apakah formulir valid.

Anda dapat menyebut ini model opt-in, dan bukan opt-out yang dijelaskan di atas.

Catatan, saya juga menggunakan validasi jquery dengan ASP.NET WebForms. Ada beberapa masalah untuk dinavigasi tetapi begitu Anda bisa melewatinya, pengalaman pengguna sangat baik.

(Perpanjangan dari @lepedan @redsquarejawab untuk ASP.NET MVC+ jquery.validate.unobtrusive.js)

The jquery validasi Plugin (bukan Microsoft tidak mengganggu satu) memungkinkan Anda untuk menempatkan .cancelkelas pada tombol submit untuk validasi memotong sepenuhnya (seperti yang ditunjukkan dalam jawaban diterima).

 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"/>

(jangan bingung dengan ini type='reset' mana ini adalah sesuatu yang sama sekali berbeda)

Sayangnya kode jquery.validation.unobtrusive.jspenanganan validasi (ASP.NET MVC) agak mengacaukan perilaku default plugin jquery.validate .

Inilah yang saya buat untuk memungkinkan Anda memakai .canceltombol kirim seperti yang ditunjukkan di atas. Jika Microsoft pernah 'memperbaiki' ini maka Anda dapat menghapus kode ini.

    // 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;
    });

Catatan: Jika pada percobaan pertama tampaknya ini tidak berfungsi - pastikan Anda tidak pergi ke server dan melihat halaman yang dibuat server dengan kesalahan. Anda harus melewati validasi di sisi server dengan beberapa cara lain - ini hanya memungkinkan formulir untuk dikirimkan sisi klien tanpa kesalahan (alternatifnya adalah menambahkan .ignoreatribut ke semua yang ada di formulir Anda).

(Catatan: Anda mungkin perlu menambah buttonpemilih jika Anda menggunakan tombol untuk mengirim)

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

Atau

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

Tetapi tanpa keberhasilan dalam validator diperlukan kustom. Untuk panggilan kirim secara dinamis, saya telah membuat tombol kirim tersembunyi tersembunyi dengan kode ini:

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();

Sekarang lewati validasi dengan benar :)

Pertanyaan ini sudah tua, tetapi saya menemukan cara lain untuk menggunakannya $('#formId')[0].submit(), yaitu mendapatkan elemen dom sebagai ganti objek jQuery, sehingga memintas semua kait validasi. Tombol ini mengirimkan formulir induk yang berisi input.

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

Juga, pastikan Anda tidak memiliki inputnama "kirim", atau itu menimpa fungsi bernama submit.

Saya menemukan bahwa cara paling fleksibel adalah dengan menggunakan JQuery:

event.preventDefault():

Misalnya jika alih-alih mengirimkan saya ingin mengarahkan, saya dapat melakukan:

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

atau saya dapat mengirim data ke titik akhir yang berbeda (misalnya jika saya ingin mengubah tindakan):

$("#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");
    })

Setelah Anda melakukan 'event.preventDefault ();' Anda melewati validasi.

Saya memiliki dua tombol untuk pengiriman formulir, tombol bernama save and exit memintas validasi:

$('.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();
});

Ini adalah versi paling sederhana, semoga membantu seseorang,

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