CODEWITHSUNDEEP
asp.net-mvc-3
user1148365
user1148365

Reputation: 81

@Html.TextBoxFor textbox isn't highlighted after failing validation

I am using MVC3 with Razor. For input I have two types of control:

  1. @Html.TextBoxFor
  2. @Html.TextAreaFor

Both have required field validation. @Html.TextAreaFor highlight the box if validation fails where as @Html.TextBoxFor does not.

Here is my code

HTML: 

@Html.TextBoxFor(m => m.FirstName)

Model:

[Required(ErrorMessage = "First Name is required")]
public string FirstName { get; set; }

Why is the textbox created using @Html.TextBoxFor not hightlighted when its validation fails?

Upvotes: 8

Views: 11801

Answers (6)

Dave
Dave

Reputation: 125

I know this is old, but in case anyone else is searching this, ensure you also use

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

After your textbox

Upvotes: 0

Auzi
Auzi

Reputation: 337

I had this problem myself. I added a new CSS class to the Site.css file (or whatever style sheet you prefer).

textarea.input-validation-error {
border: 1px solid #e80c4d;
}

Upvotes: 5

Wilky
Wilky

Reputation: 209

Add both .input-validation-error and .input.input-validation-error classes.

Upvotes: 0

UMAR-MOBITSOLUTIONS
UMAR-MOBITSOLUTIONS

Reputation: 77984

I faced same issue today:

In order to raise validation for textbox or any other field you just need these two lines:

In controller: ModelState.AddModelError("ErrorEmail", "Error Message");

In View: @Html.ValidationMessage("ErrorEmail")

And in web.config

<appSettings>
    <add key="ClientValidationEnabled" value="true" />
    <add key="UnobtrusiveJavaScriptEnabled" value="true" />
  </appSettings>

It was overwriting validation css with my own website css so that's why it was not showing red border around textbox.

making validation error style important resolved my problem:

input.input-validation-error {
    border: 1px solid #e80c4d !important;
}

Upvotes: 1

jr3
jr3

Reputation: 915

Make sure the variables you're assigning to these input fields are [Required] in your model class.. Also did you strip out any css in a "clean up" process? Try adding this if it's not in there.

.field-validation-error
{
color: #ff0000;
}
.field-validation-valid
{
display: none;
}
.input-validation-error
{
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors
{
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid
{
display: none;
}

Upvotes: 10

user596075
user596075

Reputation:

In order to have client-side validation, you need to ensure that you have the necessary scripts included in your View (whether it is through the _Layout.cshtml view or your direct view). Put this at the top of your view:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Ensure the path and the script names are correct. This will enable you to utilize client-side validation (i.e. highlighting the text box).

Upvotes: 0

Related Questions