How to clear an individual Validation message with jquery

Question

VC5 project

I have this TextBox and Validation message in my Razor view:

@Html.TextBoxFor(m => m.FireSrv.Size) @Html.ValidationMessageFor(m => m.FireSrv.Size)

I want to clear (not hide) just this message, I do not want to clear the entire form.

I tried this and it doesn't work:

$('#FireSrv_Size').find(".field-validation-valid").remove();

FireSrv_Size is correct, it is the id of the field in the form.

I've implemented

IValidatableObject

in my ViewModel.

public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
{
  string em = "Size is required";
  if (HasFireSrv) { if (string.IsNullOrEmpty(FireSrv.Size)) { yield return new ValidationResult(em, new[] { "FireSrv.Size" }); } }
 ...

This is what is shown in View source before and after generating the validation error:

 <input id="FireSrv_Size" name="FireSrv.Size" type="text" value="" />
 <span class="field-validation-valid" data-valmsg-for="FireSrv.Size" data-valmsg-replace="true"></span>

 <input class="input-validation-error" id="FireSrv_Size" name="FireSrv.Size" type="text" value="" />
 <span class="field-validation-error" data-valmsg-for="FireSrv.Size" data-valmsg-replace="true">Size is required</span>

How can I clear just that one validation message?

Answer 1

I feel compelled to point out that .removeClass(); removes ALL classes from the element, often NOT the desired effect. You might simply remove the single class with $(".field-validation-valid").removeClass(".field-validation-valid"); as you can target the class you wish to remove that way.

OR target the specific element

<input id="FireSrv_Size" class="FireSrv_Size" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="FireSrv.Size1" data-valmsg-replace="true"></span>

Revised: using added class

Razor syntax:

@Html.TextBoxFor(m => m.FireSrv.Size, new { @class = "validate-my-field" }) @Html.ValidationMessageFor(m => m.FireSrv.Size)

new markup has the class:

<input id="FireSrv_Size" class="validate-my-field" name="FireSrv.Size" type="text" value="" />

Code with new class:

var myfield = $('.validate-my-field')
myfield.removeClass('field-validation-error');
myfield.next('span[data-valmsg-for]').removeClass("field-validation-error").addClass("field-validation-valid").html("");

Specific by ID:

var myfield = $('#FireSrv_Size');
myfield.removeClass('field-validation-error');
myfield.next('span[data-valmsg-for]').removeClass("field-validation-error").addClass("field-validation-valid").html("");

All in one shot:

$('#FireSrv_Size').removeClass('field-validation-error').next('span[data-valmsg-for]').removeClass("field-validation-error").addClass("field-validation-valid").html("");

IF the validation data attribute on the span is added after the page render you might have to do:

$('#FireSrv_Size').removeClass('field-validation-error').next('span').filter(function(){
    return $('[data-valmsg-for]');
}).removeClass("field-validation-error").addClass("field-validation-valid").html("");

Answer 2

If you are looking to remove it on the server side, use following:

ModelState["FireSrv.Size"].Errors.Clear();

On client side you can do something like this:

$('#FireSrv_Size").removeClass("field-validation-error");

See this jsFiddle. If that does not work for you, let me know.

Update 1 - after some research and some debugging, this is the code that would remove error in my local example.

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

// all errors
//var $errors = $form.find(".field-validation-error span");

// find just error attached to FireSrv_Size
var $errors = $("#FireSrv_Size").next(".field-validation-error").find("span");

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

I used this article SO as starting point.

Answer 3

This clears both ...-validation-error classes and the contents of the data-valmsg-for="FireSrv.Size". The first line clears the input-validation-error class on the TextBox.

var textname = '"FireSrv.Size"'; $('input:text[name=' + textname + ']').removeClass();
var dvmf = '"FireSrv.Size"'; $('span[data-valmsg-for=' + dvmf + ']').html("");
$('span[data-valmsg-for=' + dvmf + ']').removeClass("field-validation-error").addClass("field-validation-valid");

Answer 4

You can use $(".field-validation-error").empty() instead to clear all the validation error messages. Using .remove() or .hide() removes the error messages from the screen and doesn't show up again even if there are any errors on submit.

Hope this helps solve your primary purpose of clearing validation error messages.