验证错误消息未清除

Question

I am using jquery validation & jquery.validate.unobtrusive on my application.

On my page I have about 4-5 controls. Out of these some are hidden. There are 3 buttons on my page. On the click of the first button I am showing the hidden controls (radiobutton and dropdown). All of these are required fields. When the user clicks the other button which is the submit button all the required fields show up just fine. The third button is used to toggle between a different view which has its own controls.

My issue is when the user submits the form using the second button and if the fields are not populated it shows the required field message fine. At this point when I click on 3rd button to toggle to a different view and then toggle back to my view the error messages are still there. I am not able to clear out these error messages. See below radio button that I have:

<div class="col-sm-10">
    <label class="radio-inline">
       <input type="radio" value="myValue1" asp-for="Name" class="required" 
           data-bind="checked: name" />Name value 1
    </label>
<label class="radio-inline">
    <input type="radio" value="myValue2" asp-for="Name"  data-bind="checked: 
     name" />Name value 2
</label>
<span asp-validation-for="Name" class="danger"></span>

I am using knockout and on button click of the third button where I toggle I try to use the below code to clear out and reset the form but it does not work.

        var validator = $("form").validate();
        validator.resetForm();

Another thing is while submitting the form I am using the following code to force the validation as these controls are initially hidden:

        $("form").removeData("validator");
        $("form").removeData("unobtrusiveValidation");   
        $.validator.unobtrusive.parse($("form"));

Lastly I can see the following span that is generated in the html:

<span class="help-block-msg field-validation-valid" data-valmsg-for="Name" 
data-valmsg-replace="true">
<span id="Name-error" class="">This field is required.</span>
</span>

Answer 1

You can use the following code to clear out errors:

//get the form inside we are working - change selector to your form as needed
var $form = $("form");

 // get validator object 
var $validator = $form.validate();

 // get errors that were created using jQuery.validate.unobtrusive
var $errors = $form.find(".field-validation-error span");

// trick unobtrusive to think the elements were succesfully validated
// this removes the validation messages
$errors.each(function(){ $validator.settings.success($(this)); })

// clear errors from validation
$validator.resetForm();

This has been taken from: How to clear jquery validate errors