jquery validation: remove error message from form

Question

I have a form with an email field and a "get newsletter" checkbox.

<form method="post" class="form-horizontal" action="">

<input class="form-control" type="text" id="Email" name="Email" value="[email protected]" />
<span class="text-danger field-validation-valid" data-valmsg-for="Email" data-valmsg-replace="true"></span>

<input data-val="true" id="GetNewsletter" name="GetNewsletter" type="checkbox" value="true" />

</form>

The email field is initially optional, but required if user checks the get newsletter checkbox. I added this on client side using jquery validation.

$("#GetNewsletter").change(function () {
    var checked = $(this).prop("checked");
    if (checked) {
        $('#Email').rules('add', {  //set required rule
            required: true,
            messages: {
                required: "Email is required."
            }
        });
    }
    else {
        $('#Email').rules('remove', 'required'); //remove rule and call valid()
        $('#Email').valid();
    }
});

If the checkbox is unchecked, I remove the rule and call valid() to reset the status of the input. Unfortunately, this does not remove the validation message.

Is there a built-in way to clear the validation message? I want to avoid manipulating the markup, e.g. remove/add validation classes.

Something else is wrong. Calling .valid() after removing the rule should remove the message. — Sparky
– Sparky, Commented Nov 7, 2017 at 15:11
Can you? Seriously, the burden is on you to properly demonstrate the issue. — Sparky
– Sparky, Commented Nov 7, 2017 at 15:30

user3559349 · Accepted Answer · 2017-11-07 23:57:18Z

Your (unsuccessful) attempt would only be removing the error message in the view and you would still need to write code in your controller method to validate the data (client side validation is a nice bonus but it can easily be bypassed you must validate on the server).

Instead, use a conditional ValidationAttribute that implements IClientValidatable so that you get both client and server side validation. An example of such an attribute is the foolproof [RequiredIf] or [RequiredIfTrue] attribute which you would apply to your model as

[RequiredIfTrue("GetNewsletter", ErrorMessage = "...")]
public string Email { get; set; }

and then in the view

@Html.TextBoxFor(m => m.Email)
@Html.ValidationMessageFor(m => m.Email)

@Html.CheckBoxFor(m => m.GetNewsletter)

If the checkbox is checked, and Email is empty, then a validation message will be displayed (and if client side validation is bypassed, then ModelState will be invalid in the POST method.

Alternatively, if you want to write your own conditional validation attributes, refer The Complete Guide To Validation In ASP.NET MVC 3 - Part 2 for a good guide.

Sparky · Accepted Answer · 2017-11-07 20:34:17Z

You can only dynamically add/remove rules that were added with one the plugin's methods¹.

$('form').validate({
    rules: {
        Email: {
            required: true
        }
    }
});

DEMO: jsfiddle.net/zh5uofs9/

If you have anything else making it required, such as inline attributes² , then you will not be able to use .rules('remove')¹.

DEMO 2: jsfiddle.net/zh5uofs9/1/

¹ As per the documentation:

"Manipulates only rules specified via rules-option or via rules("add")."

² Since you're using ASP, your instance of .validate() is being automatically constructed by the Unobtrusive Validation plugin and you have inline attributes declaring the rules.

Bottom line: The message will not clear because the rule is not being removed. And you cannot dynamically disable or remove the rule while using inline validation attributes.

Collectives™ on Stack Overflow

jquery validation: remove error message from form

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related