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?
 }

Answer 1

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); 

Answer 2

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"); 

Answer 3

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'), '');