CODEWITHSUNDEEP
jqueryasp.net-mvcrazorjquery-validation-enginehtml.textbox
skepnaden
skepnaden

Reputation: 143

MVC Html.TextBox (not For) client side validation styling

I'm having aesthetic and consistency problems when it comes to client side validation errors in a certain View. The view consists of several (child) partial views and is basically a form using both MVC/Razor's Html.Textbox() and Html.TextBoxFor() in many places. In some of the partial views, I need the inputs not to be strongly typed, hence only TextBox(), and in these instances the validation won't trigger the client side styling of the input-boxes.

I know that the ModelState is not valid and the Html.ValidationSummary() shows the correct error messages from validation-errors triggered by both TextBox()'s and TextBoxFor()'s. However only the TextBoxFor()'s gets the class: "input-validation-error"

Question: How do I turn my TextBox()'s red when an error has fired? (simply put). I figure there's a value or attribute missing that JQuery validation triggers on.

Code:

Works: @Html.TextBoxFor(x => x.Owner, new { @class = "form-control" })

Doesn't: @Html.TextBox(name, Model.Name, new { @class = "form-control" })

HTML output

Works: <input class="input-validation-error form-control" data-val="true" data-val-required="Input is required." id="Owner" name="Owner" type="text" value="">

Doesn't: <input class="form-control" id="Applicants_1__Name" name="Applicants[1].Name" type="text" value="">

Upvotes: 0

Views: 1252

Answers (1)

Whiplash450
Whiplash450

Reputation: 964

Personally I would just do the validation in jquery and then you can customise whatever you need.

you can then set the css of the input text box to be red easily;

$("#myInput").css("border", "1px solid red");

and reset it using

$("#myInput").css("border", "none")

Upvotes: 0

Related Questions