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

ฉันใช้ปลั๊กอินตรวจสอบ 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
    }
}

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

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

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

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

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

ฉันเจอปัญหานี้ด้วยตัวเอง ฉันจำเป็นต้องตรวจสอบความถูกต้องตามเงื่อนไขบางส่วนของแบบฟอร์มในขณะที่กำลังสร้างแบบฟอร์มตามขั้นตอน (เช่นอินพุตบางตัวจะถูกต่อท้ายแบบไดนามิกระหว่างรันไทม์) เป็นผลให้บางครั้งการเลือกแบบเลื่อนลงจะต้องมีการตรวจสอบและบางครั้งมันจะไม่ อย่างไรก็ตามในตอนท้ายของความเจ็บปวดนั้นจะต้องมีการตรวจสอบ เป็นผลให้ฉันต้องการวิธีการที่แข็งแกร่งซึ่งไม่ใช่วิธีแก้ปัญหา 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);

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

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

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

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

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

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

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

หากคุณต้องการที่จะทำโดยไม่ต้องใช้ตัวแปรแยกแล้ว

$("#myForm").data('validator').resetForm();

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

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

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

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

คุณสามารถใช้ได้:

$("#myform").data('validator').resetForm();

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

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

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

var validator = $('#Form').validate();

validator.submitted = {};
validator.prepareForm();
validator.hideErrors();
validator.elements().removeClass(validatorObject.settings.errorClass);

สำหรับผู้ที่ใช้รหัส 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(); });

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

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

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

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

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

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

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

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

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

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

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

โดยใช้:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

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

validator.hideThese(validator.errors());

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

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

ลองใช้:

onClick="$('.error').remove();"

บนปุ่มล้าง

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

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

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

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

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

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

การแก้ปัญหาทำได้โดยการเปรียบเทียบการทำเครื่องหมาย 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');

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

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

this.invalid = {};

ฉันแค่ทำ

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

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

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

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

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

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

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

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

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

ฟังก์ชั่นการใช้วิธีการของ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"));

เขียนรหัสของตัวเองเพราะทุกคนใช้ชื่อคลาสอื่น ฉันรีเซ็ตการตรวจสอบ jQuery ด้วยรหัสนี้

$('.error').remove();
        $('.is-invalid').removeClass('is-invalid');