Bohn Bohn - 5 months ago 13
HTML Question

Client side validation is firing but does not show the message

For an Email field I have this generated HTML

<input name="PasswordLoserEmail" class="input-validation-error form-control" id="PasswordLoserEmail" aria-invalid="true" aria-required="true" aria-describedby="PasswordLoserEmail-error" type="email" value="" data-val-required="The email address is required" data-val="true" data-val-email="Invalid Email Address">


From this Razor code:

@Html.TextBoxFor(m => m.PasswordLoserEmail, new { @class = "form-control", type = "email" })


And the annotations I have added are these:

[Display(Name = "Email address")]
[EmailAddress(ErrorMessage = "Invalid Email Address")]
[Required(ErrorMessage = "The email address is required")]
public string PasswordLoserEmail { get; set; }


And I have this in bottom of my
HTML
page too:

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}


and just added this thing to my
CSS
too:

.input-validation-error {
display: block;
color: red;
}


But when I enter an invalid email address, although it prevents the form from getting submitted, but it does NOT show the error message to the user.
Why?

Answer

You need to add a ValidationMessageFor to show the error message:

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