Bohn Bohn - 1 year ago 46
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 Source

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

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