implementing validation states to textbox in MVC application

Question

In bootstrap 3 we can add Validation States to our text box.

But if I had to implement in my MVC5 application and change the textbox's validation state as the user types. How would I do that? For example:

In my model If i have some field as

[Required(ErrorMessageResourceType = typeof (Resource), ErrorMessageResourceName = "RegisterViewModel_FirstName_First_Name_is_required")]

and in view

@Html.TextBoxFor(m=>m.Name)//change textbox according to state using Bootstrap 3 validation state?
@Html.ValidationMessageFor(m=>m.Name)

In the site they just give the class-name :

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1">
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>

Has anyone implemented this to their application?

Would be awesome to know how to implement this in a MVC application.

I have no idea how to implement this.

Answer 1

This blog post has most of the solution: http://www.joe-stevens.com/2013/01/23/twitter-bootstrap-validation-styles-with-asp-net-mvc/comment-page-1/#comment-22194

Being new to this myself, it took some poking around to get it to actually work in bootstrap3/MVC5.

Here's what I did:

Surround each of your controls with a div of class form-group (the MVC5 code generator does this for you - a default text field for a new MVC5 project looked like this for me:

<div class="form-group">
    @Html.LabelFor(model => model.Artist, new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.Artist)
        @Html.ValidationMessageFor(model => model.Artist)
    </div>
</div>

Then tell jquery.Validator to change the defaults for highlight and unhighlight:

jQuery.validator.setDefaults({
    highlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
        }
    },
    unhighlight: function( element, errorClass, validClass ) {
        if ( element.type === "radio" ) {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $(element).removeClass(errorClass).addClass(validClass);
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
        }
    }
});

This takes the default jQuery.validator highlight and unhighlight code and adds a line to each of them to add/remove the 'has-success' and 'has-error' classes appropriately.

Also note (since this took me a while to figure out) - don't put the call to jQuery.validator.setDefaults in your $(document).ready function as that appears to set the defaults for a new empty validator class, just put it at the top level in your script block or .js file.