jQuery Validation eklentisi: belirtilen gönderme düğmeleri için doğrulamayı devre dışı bırak

Jörn Zaeffere mükemmel jQuery Validation eklentisi ile (bazı özel doğrulama için eklenen yöntemler ile) doğruladığım birden çok alana sahip bir form var. Belirtilen gönderme denetimleriyle doğrulamayı nasıl atlatabilirsiniz (diğer bir deyişle, bazı gönderme girdileriyle yangın doğrulaması yapar, ancak başkalarıyla ateşleme yapmazsınız)? Bu, standart ASP.NET doğrulayıcı denetimlerine sahip ValidationGroups'a benzer.

Benim durumum:

ASP.NET WebForms ile birlikte, ancak isterseniz bunu göz ardı edebilirsiniz. Ancak, doğrulamayı daha çok "öneri" olarak kullanıyorum: başka bir deyişle, form gönderildiğinde, doğrulama etkinleşiyor, ancak "zorunlu" bir ileti görüntülemek yerine, "siz" aşağıdaki alanları kaçırdınız .... yine de devam etmek istiyor musunuz? " Hata kapsayıcısının bu noktasında, artık görülebilen ve doğrulamayı yok sayan ve yine de gönderecek başka bir gönderme düğmesi var. Bu düğme denetimi ve hala yazı için .validate () formlarını atlatmak nasıl?

Http://jquery.bassistance.de/validate/demo/multipart/ adresindeki Bir Ev Satın Al ve Sat örneği , önceki bağlantılara ulaşmak için buna izin verir, ancak bunu özel yöntemler oluşturarak ve doğrulayıcıya ekleyerek yapar. Zaten doğrulama eklentisinde işlevselliği çoğaltan özel yöntemler oluşturmak zorunda kalmamayı tercih ederim.

Aşağıda, şu anda aldığım hemen uygulanabilir komut dosyasının kısaltılmış bir sürümüdür:

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

cancelDoğrulamayı gizlemek için bir gönderme düğmesine bir CSS sınıfı ekleyebilirsiniz

Örneğin

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

Bu özelliğin jQuery Validator belgelerine buradan bakın: Gönderim sırasında doğrulamayı atlama

DÜZENLE :

Yukarıdaki teknik kullanımdan kaldırılmıştır ve yerine formnovalidateözniteliği getirilmiştir.

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

Bunu yapmanın diğer (belgesiz) yolu:

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

düğmenin tıklama etkinliğinde (örneğin).

Yine başka bir (dinamik) yol:

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

Ve yeniden etkinleştirmek için varsayılan değeri ayarladık:

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

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

Girdiye formnovalidate özniteliği ekle

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

Class = "cancel" eklemek artık kullanımdan kaldırıldı

Bu bağlantıda gönderirken Atlama doğrulaması için dokümanlara bakın

Formun gönderilmesinde doğrulanmayacak doğrulamayı bağlarken , onubmit: false seçeneğini ( belgelere bakın ) kullanabilirsiniz. Sonra asp: düğmenize bir OnClientClick = $ ('# aspnetForm') ekleyin. Valid (); formun geçerli olup olmadığını açıkça kontrol etmek için.

Buna, yukarıda açıklanan kapsam dışında kalma yerine, katılım tercihi modeli diyebilirsiniz.

Ayrıca ASP.NET WebForms ile jquery doğrulama kullanıyorum. Gezinmek için bazı sorunlar var, ancak bunlardan geçtikten sonra kullanıcı deneyimi çok iyi.

( @lepe'In uzantısı ve + @redsquareiçin cevap )ASP.NET MVCjquery.validate.unobtrusive.js

JQuery doğrulama eklentisi (değil, Microsoft mütevazi bir) Bir koymak için izin verir .cancel(kabul edilen cevap gösterildiği gibi) tamamen baypas doğrulama için Gönder düğmesini sınıfı.

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

( type='reset'tamamen farklı olan bir şeyle karıştırmayın )

Ne yazık ki jquery.validation.unobtrusive.jsdoğrulama işleme (ASP.NET MVC) kodu jquery.validate eklentisinin varsayılan davranışını bozar .

Bu, .cancelyukarıda gösterildiği gibi gönder düğmesine basmanıza izin vermek için buldum . Microsoft bunu 'düzeltirse' bu kodu yeniden kaldırabilirsiniz.

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

Not: İlk denemede bunun işe yaramadığı görülüyorsa, sunucuya yuvarlanmadığınızdan ve sunucu tarafından oluşturulan bir sayfayı hatalı olarak gördüğünüzden emin olun. Başka bir yolla sunucu tarafında doğrulamayı atlamanız gerekir - bu sadece formun istemci tarafına hatasız olarak gönderilmesine izin verir (alternatif .ignore, formunuzdaki her şeye nitelikler eklemek olacaktır ).

(Not: buttonGöndermek için düğmeler kullanıyorsanız seçiciye eklemeniz gerekebilir )

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

Veya

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

Ancak özel gerekli bir validatorda başarı olmadan. Dinamik olarak bir gönderme çağırmak için, bu kod ile sahte gizli gönderme düğmesi oluşturduk:

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

Şimdi doğrulamayı atlayın :)

Bu soru eski, ama bunun etrafında başka bir yol buldum $('#formId')[0].submit(), bu jQuery nesnesi yerine dom öğesi alır, böylece herhangi bir doğrulama kanca atlayarak. Bu düğme girişi içeren üst formu gönderir.

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

Ayrıca, input"gönder" adında herhangi bir adınız olmadığından emin olun veya adın adlandırdığı işlevi geçersiz kılar submit.

Ben en esnek yolu JQuery's kullanmak olduğunu bulundu:

event.preventDefault():

Örneğin, göndermek yerine yönlendirmek istiyorsam şunları yapabilirim:

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

ya da ben farklı bir uç noktaya veri gönderebilirsiniz (örneğin eylem değiştirmek istiyorsanız):

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

Bir kez 'event.preventDefault ();' doğrulama işlemini atlarsınız.

Form gönderme için iki düğme var, save ve exit adlı düğme doğrulamayı atlar:

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

İşte en basit sürüm, umarım birine yardımcı olur,

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

<button type="submit" formnovalidate="formnovalidate">submit</button>

ayrıca çalışıyor