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?