วิธีการล้างข้อความแสดงข้อผิดพลาดการตรวจสอบ jQuery?


169

ฉันใช้ปลั๊กอินตรวจสอบ jQuery สำหรับการตรวจสอบฝั่งไคลเอ็นต์ ฟังก์ชั่นeditUser()ถูกเรียกใช้เมื่อคลิกปุ่ม 'แก้ไขผู้ใช้' ซึ่งแสดงข้อความผิดพลาด

แต่ผมต้องการที่จะข้อความผิดพลาดที่ชัดเจนเกี่ยวกับรูปแบบของฉันเมื่อฉันคลิกที่ปุ่ม 'ล้าง' clearUser()ที่เรียกฟังก์ชั่นที่แยกต่างหาก

function clearUser() {
    // Need to clear previous errors here
}

function editUser(){
    var validator = $("#editUserForm").validate({
        rules: {
            userName: "required"
        },
        errorElement: "span",
        messages: {
            userName: errorMessages.E2
        }
    });

    if(validator.form()){
        // Form submission code
    }
}

คำตอบ:


209

คุณต้องการresetForm()วิธีการ:

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

ผมจับได้จากแหล่งที่มาของหนึ่งในการสาธิตของพวกเขา

หมายเหตุ: รหัสนี้ใช้ไม่ได้กับ Bootstrap 3


31
สำหรับผู้ที่ใช้ bootstrap มีหลายกรณีที่resetForm()ไม่ได้ล้างอินสแตนซ์ทั้งหมดของ.errorองค์ประกอบลูกของแบบฟอร์ม นี้จะทำให้ CSS .removeClass()ที่เหลือเช่นสีข้อความสีแดงจนกว่าคุณจะเรียก ตัวอย่าง:$('#myform .control-group').removeClass('error');
jlewkovich

14
การใช้ bootstrap 3 จะไม่ซ่อนข้อผิดพลาดในการตรวจสอบความถูกต้องของฟิลด์ ช่างเป็นความอัปยศ
มัฟฟินแมน

2
มันใช้งานได้สำหรับฉันกับ Bootstrap 3 ปัญหาอาจเกิดจากการรวมไลบรารีทั้งสองของคุณหรือไม่
bernie

3
ไม่รีเซ็ตรูปแบบนี้อย่างแท้จริงแม้จะพักข้อมูลในแบบฟอร์มเช่นกัน
Codemole

สิ่งที่ @JLewkovich กล่าวว่าการใช้ bootstrap3 เป็นจริงต้องนำการรีเซ็ตด้วยตนเองไปใช้ในการตรวจสอบและหาว่ามีการใช้คลาสใดในข้อผิดพลาด
Nestor Colt

126

ฉันเจอปัญหานี้ด้วยตัวเอง ฉันจำเป็นต้องตรวจสอบความถูกต้องตามเงื่อนไขบางส่วนของแบบฟอร์มในขณะที่กำลังสร้างแบบฟอร์มตามขั้นตอน (เช่นอินพุตบางตัวจะถูกต่อท้ายแบบไดนามิกระหว่างรันไทม์) เป็นผลให้บางครั้งการเลือกแบบเลื่อนลงจะต้องมีการตรวจสอบและบางครั้งมันจะไม่ อย่างไรก็ตามในตอนท้ายของความเจ็บปวดนั้นจะต้องมีการตรวจสอบ เป็นผลให้ฉันต้องการวิธีการที่แข็งแกร่งซึ่งไม่ใช่วิธีแก้ปัญหา jquery.validateผมปรึกษาซอร์สโค้ด

นี่คือสิ่งที่ฉันมาด้วย:

  • ล้างข้อผิดพลาดโดยระบุความสำเร็จในการตรวจสอบ
  • ตัวจัดการการโทรสำหรับการแสดงข้อผิดพลาด
  • ล้างที่เก็บข้อมูลความสำเร็จหรือข้อผิดพลาดทั้งหมด
  • รีเซ็ตการตรวจสอบแบบฟอร์มทั้งหมด

    นี่คือสิ่งที่ดูเหมือนในรหัส:

    function clearValidation(formElement){
     //Internal $.validator is exposed through $(form).validate()
     var validator = $(formElement).validate();
     //Iterate through named elements inside of the form, and mark them as error free
     $('[name]',formElement).each(function(){
       validator.successList.push(this);//mark as error free
       validator.showErrors();//remove error messages if present
     });
     validator.resetForm();//remove error class on name elements and clear history
     validator.reset();//remove all error and success data
    }
    //used
    var myForm = document.getElementById("myFormId");
    clearValidation(myForm);

    การย่อส่วนเป็น jQuery:

    $.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();};
    //used:
    $("#formId").clearValidation();

  • 2
    ยอดเยี่ยมโซลูชันนี้ใช้งานได้กับ "ValidationMessageFor"
    Syed Ali

    1
    ที่ดี! ทำงานได้อย่างสมบูรณ์แบบด้วย Bootstrap และ MVC!
    swissben

    2
    ก่อนอื่นขอขอบคุณ! มันใช้งานได้ดีมานานหลายปี แต่ตอนนี้ฉันได้ค้นพบปัญหาด้านประสิทธิภาพ: showErrorsทำการจัดการ DOM บางอย่างและมันถูกเรียกใช้สำหรับทุกองค์ประกอบในรูปแบบ เบราว์เซอร์จะค้างสองสามวินาทีเมื่อใช้รหัสนี้ในฟอร์มที่มีการควบคุม ~ 30 วิธีการแก้ปัญหาสำหรับผมคือการย้ายออกจากวงและเพียงแค่เรียกว่าครั้งหนึ่งเคยถูกต้องก่อนshowErrors validator.resetFormเท่าที่ฉันสามารถบอกได้มันจะทำงานในลักษณะเดียวกันและเร็วกว่ามาก
    Michael Sandino

    ฉันใช้สิ่งนี้มาจนถึงทุกวันนี้ซึ่งฉันพบว่าถ้าฉันใช้วิธีนี้กับปุ่ม "รีเซ็ต" มันจะลบข้อผิดพลาดทั้งหมด แต่ไม่มีการตรวจสอบอีกต่อไป ... แม้ว่าฉันจะลองตรวจสอบอีกครั้งทุกอย่างก็ใช้ได้
    Savandy

    58

    หากคุณต้องการซ่อนข้อผิดพลาด:

    $("#clearButton").click(function() {
      $("label.error").hide();
      $(".error").removeClass("error");
    });

    หากคุณระบุให้errorClassเรียกคลาสนั้นเพื่อซ่อนแทนerror(ค่าเริ่มต้น) ที่ฉันใช้ด้านบน


    2
    @mark - ถูกต้อง แต่ไม่ได้ออกแบบมาเพื่อ ... พวกเขายังคงไม่ถูกต้องเราเพิ่งซ่อนข้อความแสดงข้อผิดพลาดในกรณีนี้ นี่คือทางเลือกที่จะเป็นคำตอบที่ได้รับการยอมรับสำหรับกรณีที่คุณโดยเฉพาะต้องการซ่อน (ไม่ละเลยเช่นไม่อนุญาตส่ง) ข้อผิดพลาด มันเกิดขึ้นบ่อยมากกว่าที่คุณคิด :)
    นิค Craver

    1
    ปัญหาคือเมื่อคุณรีเซ็ตฟอร์มกลับมาและแก้ไขอีกครั้ง กล่องโต้ตอบข้อผิดพลาดของฉันแสดงจำนวนข้อผิดพลาดและจำนวนนั้นจะสรุปรวม แม้กระทั่ง 'resetForm' ก็ไม่ได้ช่วยอะไร
    ทำเครื่องหมาย

    1
    แม้ฉันจะทำสิ่งนี้ แต่มันนำไปสู่ปัญหาอื่น การตรวจสอบจะไม่ใช้ในครั้งต่อไปที่กล่องโต้ตอบเปิดขึ้น!
    Vandesh

    เทคนิคนี้ใช้ได้กับฉันในเว็บไซต์ Bootstrap 3 เพียงแค่ต้องเปลี่ยนคลาสของข้อผิดพลาดต่อไปนี้: $(".has-error").removeClass("has-error");
    Myke Black

    42

    หากคุณไม่ได้บันทึกตัวตรวจสอบความถูกต้องไว้ก่อนหน้านี้เมื่อแนบไปกับแบบฟอร์มคุณสามารถเรียกใช้เพียงแค่

    $("form").validate().resetForm();

    เช่นเดียวกับที่.validate()จะส่งคืนเครื่องมือตรวจสอบตัวเดิมที่คุณแนบไว้ก่อนหน้านี้ (ถ้าคุณทำเช่นนั้น)



    18

    น่าเสียดายที่validator.resetForm()ไม่สามารถใช้งานได้ในหลายกรณี

    ฉันมีกรณีที่ถ้ามีคนกด "ส่ง" ในฟอร์มที่มีค่าว่างก็ควรละเว้น "ส่ง" ไม่มีข้อผิดพลาด นั่นง่ายพอ หากมีคนใส่ค่าบางส่วนและกดปุ่ม "ส่ง" ผู้ใช้ควรตั้งค่าสถานะบางฟิลด์ว่ามีข้อผิดพลาด อย่างไรก็ตามหากพวกเขาล้างค่าเหล่านั้นและกด "ส่ง" อีกครั้งควรล้างข้อผิดพลาด ในกรณีนี้ด้วยเหตุผลบางอย่างไม่มีองค์ประกอบในอาร์เรย์ "currentElements" ภายในตัวตรวจสอบดังนั้นการดำเนินการ.resetForm()จะไม่ทำอะไรเลย

    มีข้อบกพร่องที่โพสต์เกี่ยวกับเรื่องนี้

    จนกว่าจะถึงเวลาที่พวกเขาแก้ไขคุณจะต้องใช้คำตอบของ Nick Craver ไม่ใช่คำตอบที่ยอมรับของ Parrots


    เฉพาะในโลกจาวาสคริปต์เท่านั้นนี่คือสถานการณ์ที่ยอมรับได้
    StackOverthrow


    6

    ฉันคิดว่าเราแค่ต้องป้อนข้อมูลเพื่อทำความสะอาดทุกอย่าง

    $("#your_div").click(function() {
      $(".error").html('');
      $(".error").removeClass("error");
    });

    5

    หากคุณต้องการเพียงล้างฉลากตรวจสอบคุณสามารถใช้รหัสจาก jquery.validate.js resetForm ()

    var validator = $('#Form').validate();
    
    validator.submitted = {};
    validator.prepareForm();
    validator.hideErrors();
    validator.elements().removeClass(validatorObject.settings.errorClass);

    4

    สำหรับผู้ที่ใช้รหัส Bootstrap 3 ด้านล่างจะล้างข้อมูลทั้งหมด: ข้อความไอคอนและสี ...

    $('.form-group').each(function () { $(this).removeClass('has-success'); });
    $('.form-group').each(function () { $(this).removeClass('has-error'); });
    $('.form-group').each(function () { $(this).removeClass('has-feedback'); });
    $('.help-block').each(function () { $(this).remove(); });
    $('.form-control-feedback').each(function () { $(this).remove(); });

    3

    ฉันทดสอบด้วย:

    $("div.error").remove();
    $(".error").removeClass("error");

    มันจะโอเคเมื่อคุณต้องการตรวจสอบอีกครั้ง


    1
    var validator = $("#myForm").validate();
    validator.destroy();

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


    1

    ในกรณีของฉันช่วยด้วยวิธีการ:

    $(".field-validation-error span").hide();

    ไม่มีคำตอบอื่นใดที่ใช้งานได้ แต่คำตอบของคุณใช้ได้ดีขอบคุณ
    Arash.Zandi

    1

    หากคุณต้องการซ่อนการตรวจสอบในฝั่งไคลเอ็นต์ที่ไม่ได้เป็นส่วนหนึ่งของการส่งแบบฟอร์มคุณสามารถใช้รหัสต่อไปนี้:

    $(this).closest("div").find(".field-validation-error").empty();
    $(this).removeClass("input-validation-error");

    1

    พยายามทุกคำตอบเดียว สิ่งเดียวที่ใช้ได้ผลสำหรับฉันคือ:

    $("#editUserForm").get(0).reset();

    โดยใช้:

    jquery-validate/1.16.0
    
    jquery-validation-unobtrusive/3.2.6/

    1

    ไม่มีวิธีแก้ปัญหาอื่นที่ใช้งานได้สำหรับฉัน resetForm()มีการบันทึกไว้อย่างชัดเจนเพื่อรีเซ็ตฟอร์มจริงเช่นลบข้อมูลออกจากแบบฟอร์มซึ่งไม่ใช่สิ่งที่ฉันต้องการ มันเกิดขึ้นกับบางครั้งไม่ทำอย่างนั้น แต่เพียงลบข้อผิดพลาด สิ่งที่ได้ผลสำหรับฉันคือ:

    validator.hideThese(validator.errors());

    0

    ลองใช้สิ่งนี้เพื่อลบการตรวจสอบความถูกต้องเมื่อคลิกที่ยกเลิก

     function HideValidators() {
                var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
                lblMsg.innerHTML = "";           
                if (window.Page_Validators) {
                    for (var vI = 0; vI < Page_Validators.length; vI++) {
                        var vValidator = Page_Validators[vI];
                        vValidator.isvalid = true;
                        ValidatorUpdateDisplay(vValidator);
                    }
                } 
            }

    ฟังก์ชั่นนี้ใช้งานได้กับปุ่มยกเลิกและที่อื่น ๆ ที่คุณต้องการใช้อันนี้ดีลองมัน
    sunny goyal


    0

    หากต้องการลบข้อมูลสรุปการตรวจสอบคุณสามารถเขียนสิ่งนี้ได้

    $('div#errorMessage').remove();

    อย่างไรก็ตามเมื่อคุณลบออกไปอีกครั้งหากการตรวจสอบความถูกต้องล้มเหลวก็จะไม่แสดงข้อมูลสรุปการตรวจสอบความถูกต้องนี้เพราะคุณลบออก แทนที่จะใช้ซ่อนและแสดงโดยใช้รหัสด้านล่าง

    $('div#errorMessage').css('display', 'none');
    
    $('div#errorMessage').css('display', 'block');  

    0

    วิธีการแก้ปัญหาข้างต้นไม่ได้ผลสำหรับฉัน ฉันรู้สึกผิดหวังที่เสียเวลากับพวกเขา อย่างไรก็ตามมีทางออกที่ง่าย

    การแก้ปัญหาทำได้โดยการเปรียบเทียบการทำเครื่องหมาย HTML สำหรับสถานะที่ถูกต้องและการทำเครื่องหมาย HTML สำหรับสถานะข้อผิดพลาด

    จะไม่มีข้อผิดพลาดเกิดขึ้น:

            <div class="validation-summary-valid" data-valmsg-summary="true"></div>

    เมื่อเกิดข้อผิดพลาด div นี้จะถูกเติมด้วยข้อผิดพลาดและเปลี่ยนคลาสเป็น validation-summary-errors:

            <div class="validation-summary-errors" data-valmsg-summary="true"> 

    การแก้ปัญหาง่ายมาก เคลียร์ HTML ของ div ซึ่งมีข้อผิดพลาดจากนั้นเปลี่ยนคลาสกลับไปเป็นสถานะที่ถูกต้อง

            $('.validation-summary-errors').html()            
            $('.validation-summary-errors').addClass('validation-summary-valid');
            $('.validation-summary-valid').removeClass('validation-summary-errors');

    การเข้ารหัสที่มีความสุข


    0

    หากคุณต้องการรีเซ็ตnumberOfInvalids()เช่นกันให้เพิ่มบรรทัดต่อไปนี้ในresetFormฟังก์ชั่นในjquery.validate.jsหมายเลขบรรทัดไฟล์: 415

    this.invalid = {};

    0

    ฉันแค่ทำ

    $('.input-validation-error').removeClass('input-validation-error');

    เพื่อลบเส้นขอบสีแดงในฟิลด์ข้อผิดพลาดการป้อนข้อมูล


    0

    $(FORM_ID).validate().resetForm(); ยังไม่ทำงานตามที่คาดไว้

    ฉันกำลังล้างฟอร์มด้วย resetForm()ฉันกำลังแบบฟอร์มการล้างด้วยมันทำงานได้ในทุกกรณียกเว้นหนึ่ง !!

    เมื่อฉันโหลดฟอร์มใด ๆ ผ่าน Ajax และใช้การตรวจสอบแบบฟอร์มหลังจากโหลดไดนามิกของฉันHTMLแล้วหลังจากนั้นเมื่อฉันพยายามรีเซ็ตฟอร์มด้วยresetForm()และมันล้มเหลวและมันจะล้างการตรวจสอบความถูกต้องทั้งหมดที่ฉันใช้กับองค์ประกอบแบบฟอร์ม

    ดังนั้นโปรดอย่าใช้สิ่งนี้สำหรับฟอร์มที่โหลดโดย Ajax หรือการตรวจสอบความถูกต้องด้วยตนเอง

    ป.ล.คุณต้องใช้คำตอบของ Nick Craverสำหรับสถานการณ์ดังที่ฉันอธิบาย


    0

    validator.resetForm()ข้อความแสดงข้อผิดพลาดที่ชัดเจนของเมธอด แต่ถ้าคุณต้องการลบเส้นขอบสีแดงออกจากฟิลด์คุณจะต้องลบคลาสออกhas-error

    $('#[FORM_ID] .form-group').removeClass('has-error');

    0

    ฟังก์ชั่นการใช้วิธีการของTravis J , JLewkovichและNick Craver ...

    // NOTE: Clears residual validation errors from the library "jquery.validate.js". 
    // By Travis J and Questor
    // [Ref.: https://stackoverflow.com/a/16025232/3223785 ]
    function clearJqValidErrors(formElement) {
    
        // NOTE: Internal "$.validator" is exposed through "$(form).validate()". By Travis J
        var validator = $(formElement).validate();
    
        // NOTE: Iterate through named elements inside of the form, and mark them as 
        // error free. By Travis J
        $(":input", formElement).each(function () {
        // NOTE: Get all form elements (input, textarea and select) using JQuery. By Questor
        // [Refs.: https://stackoverflow.com/a/12862623/3223785 , 
        // https://api.jquery.com/input-selector/ ]
    
            validator.successList.push(this); // mark as error free
            validator.showErrors(); // remove error messages if present
        });
        validator.resetForm(); // remove error class on name elements and clear history
        validator.reset(); // remove all error and success data
    
        // NOTE: For those using bootstrap, there are cases where resetForm() does not 
        // clear all the instances of ".error" on the child elements of the form. This 
        // will leave residual CSS like red text color unless you call ".removeClass()". 
        // By JLewkovich and Nick Craver
        // [Ref.: https://stackoverflow.com/a/2086348/3223785 , 
        // https://stackoverflow.com/a/2086363/3223785 ]
        $(formElement).find("label.error").hide();
        $(formElement).find(".error").removeClass("error");
    
    }
    
    clearJqValidErrors($("#some_form_id"));

    โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
    Licensed under cc by-sa 3.0 with attribution required.