11

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();
Community
  • 1
  • 1
Sean Anderson
  • 27,963
  • 30
  • 126
  • 237
  • If I recall correctly, the validation does not show and hide the error messages, but simply add text to a span which is always visible. For your manual solution to work just do the same and empty the ".field-validation-error" manually... As per why it does not work out of the box, I don't know... :/ – Tallmaris Nov 06 '12 at 20:18
  • Good idea. That is a viable workaround which does the trick, but I will leave this open for a while. Thank you! – Sean Anderson Nov 06 '12 at 21:33
  • If you're dymaically loading that dialog form you might find this question useful: http://stackoverflow.com/questions/4406291/jquery-validate-unobtrusive-not-working-with-dynamic-injected-elements – Peadar Doyle Nov 06 '12 at 23:05
  • By the way, why are you calling the .parse() method yourself? Isn't that something that the unobtrusive library from Microsoft does already at the very beginning? – Tallmaris Nov 07 '12 at 07:40
  • What do you mean by 'does already at the very beginning?' I didn't experience validation effects if I do not call parse. – Sean Anderson Nov 07 '12 at 16:26
  • 1
    Tallmaris should have phrased it better to be clearer, but what he means is that the unobtrusive library hooks into the DOM ready event (the same as $(function)) to rig the forms itself. This can be found toward the very end of the file: $jQval.unobtrusive.parse(document); – Moss Feb 18 '13 at 17:28
  • If elements are loaded dynamically, the library hooking into the DOM ready event may be doing so before the elements are loaded; in that case parse would need to be called separately after the dynamic elements are loaded. – mayabelle Oct 10 '13 at 16:55
  • possible duplicate of [How to clear Jquery validation error messages?](http://stackoverflow.com/questions/2086287/how-to-clear-jquery-validation-error-messages) – Travis J Jun 24 '15 at 23:54

5 Answers5

2

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

$('#myFormId input').on('change', function(){
    validator.element($(this));
});
Daniël Tulp
  • 1,745
  • 2
  • 22
  • 51
0

I think you can add this to your workaround :

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

Regards

To delete profile
  • 382
  • 3
  • 15
0

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.

Dean.DePue
  • 1,013
  • 1
  • 21
  • 45
0

you are using below, correct?

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

then you must use

form.resetForm();

to reset the form, it will work.

Ankit Sanghvi
  • 34
  • 3
0

try this.

var validator = $( "#myform" ).validate();
validator.resetForm();
zubergu
  • 3,646
  • 3
  • 25
  • 38
Saadi
  • 1
  • 2