Manually set unobtrusive validation error on a textbox

Question

I'm doing something similar to the remote validation, except that I already make my calls manually via jquery and setup whatever I had to setup.

Now my problem is, if I want to tell the validator that a particular textbox is not valid (and prevents the page from submitting, highlight the textbox, etc). How would I do this from code?

@Html.LabelFor(m => Model.Slug)
@Html.TextBoxFor(m => Model.Slug)
<span id="UrlMsg" class="field-validation-error" style="display: none;"></span>

 if (error) {
        $('#UrlMsg').html('This name is already in use.').fadeIn('fast');
        //what should I do here for the rest of the validation?
 }

Note to readers: the accepted answer probably doesn't do what you think it does. See my answer below for more detail. — MarredCheese
– MarredCheese, Commented Oct 2, 2020 at 19:38

SkipHarris · Accepted Answer · 2011-11-02 23:31:04Z

50

First, you can add a validation summary:

@Html.ValidationMessageFor(m => m.Slug)

Then you can manually trigger jQuery validation / unobtrusive validation with the .showError method. Here is a sample:

var errorArray = {};
errorArray["Slug"] = 'Some error message for the Slug text box';
$('#SomeFormId').validate().showErrors(errorArray);

answered Nov 2, 2011 at 23:31

SkipHarris

2,3741 gold badge25 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Helen Araya Over a year ago

But the form is valid if the errors are added manually like this $('#SomeFormId')= true?

NibblyPig Over a year ago

Works great but can't get rid of the error afterwards

FRL · Accepted Answer · 2016-11-10 15:51:37Z

8

You can also do:

@Html.ValidationMessageFor(m => m.Slug)

With this function in your code:

function setError(id, message) {
        var span = $("span[data-valmsg-for=\"" + id + "\"]");
        if (span && span.length > 0) {
            $(span).html(message);
            if (message && message != "") {
                $(span).removeClass("field-validation-valid");
                $(span).addClass("field-validation-no-valid");
            } else {
                $(span).removeClass("field-validation-no-valid");
                $(span).addClass("field-validation-valid");
            }
        }
    }

Then can set the error

setError("Slug", "errorMsg");

answered Nov 10, 2016 at 15:51

FRL

7867 silver badges10 bronze badges

Comments

kevinpo · Accepted Answer · 2018-06-19 14:42:33Z

Using showErrors did not allow the error to persist, so that running .valid() cleared the error. Instead, I added a "forcibleerror" rule and a javascript method to set the message.

function forceError(element, errorMessage) {
    $(element).rules("add", {
        forcibleerror: true,
        messages: {
            forcibleerror: function () { return errorMessage; }
        }
    });
    var isForced = false;
    if (errorMessage) {
        isForced = true;
    }
    $(element)[0].dataset.isForced = isForced;
    $(element).valid();
}
$.validator.addMethod("forcibleerror", function (value, element) {
    return $(element)[0].dataset.isForced !== "true";
});

Usage:

forceError($('#Slug'), 'my custom message');

To put it back in a valid state:

forceError($('#Slug'), '');

MarredCheese · Accepted Answer · 2020-10-03 04:10:00Z

The accepted answer has two big problems that make it useless, in my opinion:

It doesn't change the input's state to invalid. Therefore, the user is free to submit the form.
It will be wiped out as soon as the input is validated next, such as on the input's next keyboard event.

kevinpo's answer addresses both of these problems and is probably what you should use if you need dynamically-generated error messages. But static error messages are usually good enough, so...

Let's make this really simple this with unobtrusive validation.

Add this to your site-wide javascript file:

$.fn.extend({
  toggleOk: function (value) {
    this[0].dataset.ok = value;
    this.valid();
  }
});

$.validator.addMethod("ok", function (value, element) {
  return this.optional(element) || $(element)[0].dataset.ok === "true";
});

$.validator.unobtrusive.adapters.addBool("ok");

Add this to the relevant input element in your HTML. The first attribute, data-val-ok, tells unobtrusive validation to activate this type of validation for this input and tells it what error message to show when it is invalid. The second attribute, data-ok, sets the initial state to valid.

data-val-ok="That item does not exist." data-ok="true"

Call this code in your page's Javascript to set the input to invalid, display the error and related formatting, and block page submission.

$('#myInput').toggleOk(false);

Call this to change it back to valid, hide the error and related formatting, and permit page submission:

$('#myInput').toggleOk(true);

CarenRose · Accepted Answer · 2022-08-03 03:47:28Z

3

This is an improvement on FRL's answer:

@Html.ValidationMessageFor(m => m.Slug)

JS Function

const span = $('span[data-valmsg-for="' + name + '"]');
function setError(name, message) {
    const span = $(`span[data-valmsg-for="${name}"]`);
    if (span && span.length > 0) {
        $(span).html(message);
        if (message) {
            $(`input[name="${name}"]`).addClass("input-validation-error");
            $(span).removeClass("field-validation-valid");
            $(span).addClass("field-validation-error");
        } else {
            $(`input[name="${name}"]`).removeClass("input-validation-error");
            $(span).removeClass("field-validation-error");
            $(span).addClass("field-validation-valid");
        }
    }
}

Call it like this:

setError("Slug", "errorMsg");

edited Aug 3, 2022 at 3:47

CarenRose

1,3661 gold badge14 silver badges26 bronze badges

answered Dec 21, 2018 at 8:25

shlgug

1,3662 gold badges11 silver badges12 bronze badges

Collectives™ on Stack Overflow

Manually set unobtrusive validation error on a textbox

5 Answers 5

2 Comments

Comments

Comments

Let's make this really simple this with unobtrusive validation.

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Let's make this really simple this with unobtrusive validation.

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related