Plugin jQuery Validation: nonaktifkan validasi untuk tombol kirim yang ditentukan


167

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

Tentukan juga kata kunci kembali di tombol, sehingga tidak akan menavigasi technote.in/TechNote/Forums/AspnetReply.aspx?post_id=134

Jawaban:


285

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

1
Apakah ini berfungsi dengan <input />? Saya menambahkan class = "cancel" dan tidak berfungsi. Saya menggunakan MVC2 dengan MicrosoftMvcValidation. Terima kasih.
VinnyG

4
@VinnyG - tidak menggunakan MicrosoftMvcValidation (dan tidak akan pernah) - ini tidak sama dengan memvalidasi jquery.
redsquare

1
apakah mungkin untuk mencapai perilaku yang sama tanpa elemen input? misalnya, bisakah saya memicu (dengan cara yang terdokumentasi, sebagai kebalikan dari jawaban lepe) dari pengajuan formulir dan melewatkan validasi pada saat yang sama?
ivan

10
Catatan: ini tidak berfungsi jika Anda secara dinamis menambahkan pembatalan kelas, yaitu $('input[type=submit]').addClass('cancel')kelas harus ada pada pemuatan halaman.
lolesque

@lolesque Anda mungkin perlu memanggil metode validasi lagi kecuali mereka telah mengubah cara kerjanya perhatikan tanggal pada jawaban ini)
redsquare

107

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

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

pada acara klik tombol (misalnya).


Halo @ lepe, Anda tahu cara mendaftar ulang validasi jquery setelah menulis $("form").validate().cancelSubmit = true;. Saya mencoba $("form").validate().cancelSubmit = false;dan memanggil $("form").validate();kirim dari tombol kirim saya. Terima kasih
Jaikrat

3
Itu bisa dilakukan seperti $(yourForm).data('validator').cancelSubmit = false;Terima kasih
Jaikrat


16

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


10

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.


3

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


itu 4 jam bermain-main untuk Pay with PayPaltombol kirim sialan
Simon_Weaver

Ini tidak berfungsi untuk saya dengan template MVC 5 default. Saya memiliki paket Nuget JQuery 1.10.2, Validasi JQuery 1.11.1, Microsoft jQuery Unobtrusive Validation 3.0.0. Apa yang berhasil bagi saya adalah mengganti dua baris dalam kode Anda dengan: $(this).closest('form').data("validator", null).unbind().submit();Ini akan mengatur validator ke nol dan melepaskannya. Setelah itu akan mengirimkan formulir. Anda dapat mengatur ulang validasinya dengan baris ini:$.validator.unobtrusive.parse($("#YourUniqueFormId"));
Ralph Jansen

suatu tempat di sepanjang garis ini diperbaiki. Saya sudah bisa sepenuhnya mengomentari ini dan sekarang berfungsi dengan sebuah .cancelkelas. Catatan: jika Anda menggunakan type = 'image' tombol submit maka .cancelkelas tidak akan bekerja kecuali Anda mengubah ":submit"ke ":submit,:image"dalam jquery asli Plugin validasi
Simon_Weaver

2
$("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 :)


Jika Anda ingin mengecualikan kelas tertentu agar tidak divalidasi, Anda dapat menggunakannya sebagai ganti tanda bintang. $("form").validate().settings.ignore = "class-name";
James Poulose

1

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.


1

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.


1

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

0

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();
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.