ปลั๊กอินการตรวจสอบ jQuery: ปิดใช้งานการตรวจสอบสำหรับปุ่มส่งที่ระบุ

ฉันมีแบบฟอร์มที่มีหลายฟิลด์ที่ฉันกำลังตรวจสอบความถูกต้อง (บางอันมีวิธีการเพิ่มสำหรับการตรวจสอบที่กำหนดเอง) กับปลั๊กอินการตรวจสอบ jQuery ที่ยอดเยี่ยมของJörn Zaeffere คุณจะหลีกเลี่ยงการตรวจสอบความถูกต้องด้วยการควบคุมการส่งที่ระบุได้อย่างไร (กล่าวอีกนัยหนึ่งการตรวจสอบไฟไหม้ด้วยอินพุตการส่งบางอย่าง แต่ไม่ได้ทำการตรวจสอบความถูกต้องกับผู้อื่น) สิ่งนี้จะคล้ายกับ ValidationGroups ที่มีการควบคุมตัวตรวจสอบ 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 Validator ของคุณลักษณะนี้ได้ที่นี่: ข้ามการตรวจสอบความถูกต้องเมื่อส่ง

แก้ไข :

เทคนิคด้านบนเลิกใช้แล้วและแทนที่ด้วย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"> 

การเพิ่ม class = "ยกเลิก" ขณะนี้เลิกใช้แล้ว

ดูเอกสารสำหรับการข้ามการตรวจสอบความถูกต้องที่ส่งในลิงค์นี้

คุณสามารถใช้ตัวเลือกonsubmit: false (ดูเอกสารประกอบ ) เมื่อต่อสายการตรวจสอบความถูกต้องซึ่งจะไม่ตรวจสอบความถูกต้องเมื่อส่งแบบฟอร์ม จากนั้นใน asp ของคุณ: ปุ่มเพิ่ม OnClientClick = $ ('# aspnetForm'). ถูกต้อง (); เพื่อตรวจสอบอย่างชัดเจนว่าแบบฟอร์มนั้นถูกต้องหรือไม่

คุณสามารถเรียกรูปแบบการเลือกไม่ใช้แทนการเลือกไม่ใช้ที่อธิบายไว้ข้างต้น

หมายเหตุฉันกำลังใช้การตรวจสอบ jquery กับ ASP.NET WebForms ด้วย มีปัญหาในการนำทาง แต่เมื่อคุณผ่านประสบการณ์การใช้งานของผู้ใช้จะดีมาก

(ส่วนขยายของ@lepeและ@redsquareคำตอบสำหรับASP.NET MVC+ jquery.validate.unobtrusive.js)

jQuery ตรวจสอบปลั๊กอิน (ไม่ได้สร้างความรำคาญคนที่ไมโครซอฟท์) ช่วยให้คุณสามารถใส่.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 เคย 'แก้ไข' สิ่งนี้คุณก็สามารถ remvoe รหัสนี้ได้

    // 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ตัวเลือกหากคุณใช้ปุ่มเพื่อส่ง)

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

ตอนนี้ข้ามการตรวจสอบอย่างถูกต้อง :)

คำถามนี้เก่า แต่ฉันพบวิธีอื่นรอบ ๆ คือการใช้$('#formId')[0].submit()ซึ่งได้รับองค์ประกอบ dom แทนวัตถุ jQuery จึงข้าม hooks ตรวจสอบใด ๆ ปุ่มนี้จะส่งแบบฟอร์มผู้ปกครองที่มีการป้อนข้อมูล

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

นอกจากนี้ยังให้แน่ใจว่าคุณไม่ได้มีinput's ชื่อ 'ส่ง' submitหรือมันจะแทนที่ฟังก์ชั่นที่มีชื่อว่า

ฉันพบว่าวิธีที่ยืดหยุ่นที่สุดคือใช้ JQuery's:

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

นี่คือเวอร์ชั่นที่ง่ายที่สุดหวังว่าจะช่วยใครซักคน

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