المكون الإضافي للتحقق من صحة jQuery: تعطيل التحقق من صحة الأزرار المحددة

StackOverflow https://stackoverflow.com/questions/203844

  •  03-07-2019
  •  | 
  •  

سؤال

لدي نموذج مع حقول متعددة أقوم بالتحقق من صحة (بعضها مع الأساليب للتحقق من صحة مخصصة) مع مكونات Jörn Zaeffere الممتازة للتحقق من صحة JQUERY. كيف يمكنك التحايل على التحقق من صحة عناصر تحكم محددة (بمعنى آخر ، التحقق من صحة الحريق مع بعض المدخلات ، ولكن لا تقم بالتحقق من صحة مع الآخرين)؟ سيكون هذا مشابهًا لمجموعات التحقق من الصحة مع عناصر التحكم في التحقق من ASP.NET.

حالتي:

إنه مع ASP.NET WebForms ، ولكن يمكنك تجاهل ذلك إذا كنت ترغب في ذلك. ومع ذلك ، أنا أستخدم التحقق من الصحة أكثر كـ "توصية": بمعنى آخر ، عندما يتم تقديم النموذج ، يطلق عليه الحرائق ، ولكن بدلاً من عرض "مطلوب" ، تظهر "توصية" تقول شيئًا ما على طول خط "أنت" غاب عن الحقول التالية .... هل ترغب في المتابعة على أي حال؟ " في هذه المرحلة من حاوية الخطأ ، يوجد زر إرسال آخر مرئي الآن يمكن الضغط عليه والذي من شأنه أن يتجاهل التحقق من الصحة ويقدم على أي حال. كيفية التحايل على النماذج .validate () للتحكم في الزر هذا وما زالت تنشر؟

شراء وبيع عينة المنزل في http://jquery.bassistance.de/validate/demo/multipart/ يسمح بذلك من أجل الوصول إلى الروابط السابقة ، لكنه يفعل ذلك من خلال إنشاء طرق مخصصة وإضافتها إلى المدقق. أفضل عدم الاضطرار إلى إنشاء طرق تكرار أساليب مخصصة بالفعل في البرنامج المساعد للتحقق من الصحة.

فيما يلي نسخة مختصرة من البرنامج النصي المعمول به على الفور والذي حصلت عليه الآن:

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'
}); 
هل كانت مفيدة؟

المحلول

يمكنك إضافة فئة CSS من cancel إلى زر إرسال لقمع التحقق من الصحة

على سبيل المثال

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

راجع وثائق مدقق jQuery لهذه الميزة هنا: تخطي التحقق من الصحة عند التقديم


تعديل:

تم إهمال التقنية أعلاه واستبدالها بـ formnovalidate ينسب.

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

نصائح أخرى

طريقة أخرى (غير موثقة) للقيام بذلك ، هي الاتصال:

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

في حدث النقر فوق الزر (على سبيل المثال).

طريقة أخرى (ديناميكية):

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

ولإعادة تمكينها ، قمنا فقط بإعادة القيمة الافتراضية:

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

مصدر: https://github.com/jzaefferer/jquery-validation/issues/725#issuecomment-17601443

إضافة سمة formnovalidate إلى الإدخال

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

تم إهمال إضافة الفئة = "إلغاء"

راجع مستندات لتخطي التحقق من الصحة عند هذا حلقة الوصل

يمكنك استخدام ال onsubmit: خطأ الخيار (انظر توثيق) عند التحقق من صحة الأسلاك التي لن تحقق صحة عند تقديم النموذج. ثم في ASP: Button أضف onClientClick = $ ('#ASPNETform'). valid () ؛ للتحقق بشكل صريح مما إذا كان النموذج صالحًا.

يمكنك استدعاء هذا الطراز الاشتراك في الاشتراك ، بدلاً من إلغاء الاشتراك الموضح أعلاه.

ملاحظة ، أنا أيضًا أستخدم التحقق من صحة JQuery مع ASP.NET WebForms. هناك بعض المشكلات التي يجب التنقل فيها ولكن بمجرد أن تمر بها ، تكون تجربة المستخدم جيدة جدًا.

(تمديد @lepe'رمل @redsquare الإجابة ل ASP.NET MVC + jquery.validate.unobtrusive.js)


ال المكوّن الإضافي للتحقق من صحة jQuery (ليس Microsoft غير مزعج) يسمح لك بوضع ملف .cancel الفصل على زر الإرسال الخاص بك لتجاوز التحقق من الصحة بالكامل (كما هو موضح في الإجابة المقبولة).

 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' وهو شيء مختلف تمامًا)

لسوء الحظ، ال jquery.validation.unobtrusive.js تعامل التحقق من الصحة (ASP.NET MVC) كود كيندا سلوك jQuery.validate الافتراضي الافتراضي.

هذا ما توصلت إليه للسماح لك بوضعه .cancel على زر إرسال كما هو موضح أعلاه. إذا قامت Microsoft "بإصلاح" هذا ، فيمكنك فقط إعادة عرض هذا الرمز.

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

ملاحظة: إذا حاول في البداية ، يبدو أن هذا لا يعمل - تأكد من أنك لست مستديرًا إلى الخادم ومشاهدة صفحة تم إنشاؤها على الخادم مع أخطاء. ستحتاج إلى تجاوز التحقق من الصحة على جانب الخادم ببعض الوسائل الأخرى - وهذا يسمح فقط بإرسال النموذج إلى جانب العميل دون أخطاء (سيتم إضافة البديل .ignore تعزى إلى كل شيء في شكلك).

(ملاحظة: قد تحتاج إلى إضافة button إلى المحدد إذا كنت تستخدم أزرار للإرسال)

هذا السؤال قديم ، لكنني وجدت طريقة أخرى حولها للاستخدام $('#formId')[0].submit(), ، الذي يحصل على عنصر DOM بدلاً من كائن jQuery ، وبالتالي تجاوز أي خطافات التحقق من الصحة. يقدم هذا الزر نموذج الأصل الذي يحتوي على الإدخال.

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

أيضا ، تأكد من أنه ليس لديك أي inputاسم "إرسال" ، أو يتجاوز الوظيفة المسمى submit.

لقد وجدت أن الطريقة الأكثر مرونة هي استخدام jQuery:

event.preventDefault():

على سبيل المثال ، إذا كنت أريد إعادة التوجيه بدلاً من إرسالها ، يمكنني القيام بذلك:

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

أو يمكنني إرسال البيانات إلى نقطة نهاية مختلفة (على سبيل المثال إذا كنت أرغب في تغيير الإجراء):

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

بمجرد القيام "event.preventDefault () ؛" أنت تجاوز التحقق من الصحة.

لدي زر لقرعة لتقديم النموذج ، الزر المسمى الحفظ والخروج من التحقق من الصحة:

$('.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();
});
$("form").validate().settings.ignore = "*";

أو

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

ولكن دون نجاح في مصلحة مخصصة مخصصة. لاستدعاء إرسال ديناميكي ، قمت بإنشاء زر إرسال مخفي مزيف مع هذا الرمز:

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

الآن تخطي التحقق من الصحة بشكل صحيح :)

إليك أبسط إصدار ، آمل أن يساعد شخص ما ،

$('#cancel-button').click(function() {
    var $form = $(this).closest('form');
    $form.find('*[data-validation]').attr('data-validation', null);
    $form.get(0).submit();
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top