CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3validation
Sean Anderson
Sean Anderson

Reputation: 29301

jQuery unobtrusive form validator is not hiding error messages when resetting the form

I am attempting to properly validate and reset a form. The validation works fine -- fields which are required are successfully monitored. However, when I go to reset my form -- I only see the red background for my inputs clear, not the validation messages.

According to the jQuery validate documentation:

Resets input fields to their original value (requires form plugin), removes classes indicating invalid elements and hides error messages.

Here's all the info I think is relevant to the issue. Please let me know if you would like to see anything else.

Here is how I generate a DOM element in my Model. This element needs validation:

//Model.ascx
<div class="detailsRow required">
    <%= Html.LabelFor(model => model.Site) %>
    <%= Html.DropDownListFor(model => model.SelectedSiteID, new SelectList(Model.Site, "Key", "Value"))%>
    <%= Html.ValidationMessageFor(model => model.SelectedSiteID)%>
</div>

//Model.cs
[DisplayName("Site")]
public List<KeyValuePair<int, string>> Site { get; set; }

[Range(0, int.MaxValue, ErrorMessage = "Site required")]
public int SelectedSiteID { get; set; }

Site is a select list which starts with a value of -1. Any other selection is valid. As such, I validate on a range from 0 to max.

Over in JavaScript, I run the following code against my form when the user presses the 'Submit' button on the form:

var form = workflowDialogContent.find('form');
$.validator.unobtrusive.parse(form);
//Maintain a reference to the current formValidator to be able to reset.
var formValidator = $.data(form[0], 'validator');

if (form.valid()) {
}

When the user pressed submit, the form is validated and my validation message is shown if the selected site has a value of -1.

Now, whenever the a selection is changed, I want to reset my form. I've taken this logic from: How to clear Jquery validation error messages?

$(window).on('change', '#SelectedSiteID', function () {
    //Returns the formValidator we maintained a reference to.
    var validator = WorkflowDialogBuilder.getCurrentFormValidator();
    validator.resetForm();
    //TODO: resetForm's documentation says that it hides the errors, but I did not experience this, so I am doing it manually.
    //$('.field-validation-error').empty();
}

However, when I run this code... the highlighting is removed, but the error messages remain. If I call the bit of commented code -- the validation errors are hidden, but they do not re-appear the next time my form is validated.

After validating: enter image description here After calling resetForm: enter image description here

Any ideas why I would be seeing such behavior?

Update: As a work around, the following bit of code seems to do proper clean-up:

$('.field-validation-error').empty();

Upvotes: 11

Views: 9538

Answers (5)

Saadi
Saadi

Reputation: 16

try this.

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

Upvotes: 0

Ankit Sanghvi
Ankit Sanghvi

Reputation: 34

you are using below, correct?

var form = workflowDialogContent.find('form');

then you must use

form.resetForm();

to reset the form, it will work.

Upvotes: 0

Dean.DePue
Dean.DePue

Reputation: 1013

The only problem with the answers given thus far is that all of the errors go away instead of just the one you want. I had a similar problem with getting an address and if the state is DC I am requiring the entry of the quadrant(NW,NE,SW,SE). I add and remove the requirement with jquery and then wrap the @Html.ValidationMessageFor() in a div, then I simply hide the div when a different state is selected.

Upvotes: 0

Dani&#235;l Tulp
Dani&#235;l Tulp

Reputation: 1845

why not trigger element validation as soon as the field is altered

$('#myFormId input').on('change', function(){
    validator.element($(this));
});

Upvotes: 2

To delete profile
To delete profile

Reputation: 382

I think you can add this to your workaround :

var form = $("#MyFormId");
form.find(':input').removeClass("input-validation-error");

Regards

Upvotes: 0

Related Questions