ValidationMessageFor not showing up in boostrap modal - asp.net-mvc

Question

Inside my bootstrap modal is a form. When I click the submit button , the validation message error is not showing up. (I intend to enter/input invalid data). I reload the boostrap modal if there is detected error , and I do this in the controller in order to keep the modal open. Is there a different approach here? I wonder why the error message doesn't show up.
Model:
[Display(Name="Email:")]
[EmailAddress(ErrorMessage="Invalid Email Address!")]
public string Email { get; set; }
View:
#Html.LabelFor(e => e.Email, new { #class = "control-label col-md-2" })
<div class="col-md-2">
#Html.EditorFor(e => e.Email, new {htmlAttributes = new { #class = "form-control", required = "required" } })
#Html.ValidationMessageFor(model => model.Email)
</div>
Controller:
//for submit button
if (ModelState.IsValid)
{
//Proceed to Saving
}
//Keep modal open to show validation message
TempData["HasError"] = "YES";
return RedirectToAction("Index");
//Index action
[HttpGet]
public ActionResult Index()
{
//send this in frontend to know if bootstrap modal will reload
ViewBag.Status = TempData["HasError"];
return View();
}
Frontend / js
<script>
$(function (){
var x = '#status';
//show the modal of registration form since there is a validation message error
if (x == "YES") {
var tab = 'SignupFrm';
$('#' + tab).addClass("tab-pane fade in active");
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
$('#mLogin').modal('show');
}
})
</script>

Answer 1

From your comments, you have not included the scripts for client side validation, so first step is to include them (after your jquery 2.1.4 min.js script)
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
or better (assuming your have the default bundles in your BundleConfig.cs file)
#Scripts.Render("~/bundles/jqueryval")
Assuming you have not turned off client side validation, then this will now display the validation error message(s) when you click the form's submit button and cancel the submit (your controller POST method will not be hit).
However, you still need to handle it in the server in case a malicious user by-passes it. Currently, if your model is not valid, you do a redirect to the GET method, which means that ModelState is lost. Instead you need to return the view, and to ensure the modal is reopened, you can add a ViewBag property or just check for ModelState errors in the view). Your POST method should be (note I am assuming the model is Person.cs)
[HttpPost]
public ActionResult Index(Person model) // modify class name to suit
{
if (!ModelState.IsValid)
{
ViewBag.HasErrors = true;
return View(model);
}
// save and redirect
}
Then in your script
$(function () {
if ('#ViewBag.HasErrors') {
// display the modal
}
)};
An alternative to adding a ViewBag property would be to use the following
$(function () {
if ('#ViewContext.ViewData.ModelState.Values.SelectMany(v => v.Errors).Any()') {
// display the modal
}
)};
Side note: You have added required = "required" to your textbox suggesting you want the Email to be required. Adding this attribute does not give you server side validation and adding the jquery validation scripts means it will be ignored (the novalidate="novalidate" attribute is added to your <form> element). Remove it and instead add the RequiredAttribute to your property so that you get both client and server side validation.
[Required(ErrorMessage="Please enter an email address")]
[EmailAddress(ErrorMessage="Invalid Email Address!")]
public string Email { get; set; }

Answer 2

You might want to check if the generated input's "id" and (I think) "name" attributes match the validation's <span> "data-valmsg-for" attribute.
I had a case where I needed custom values for these had the same issue for validation message not showing on client and that was my solution:
#Html.ValidationMessage("newMarkValue", new { #class = "text-danger" })
#Html.EditorFor(modelItem => item.NewMark, null, "newMarkValue", new { htmlAttributes = new { #class = "form-control" } })
Renders the validation <span> as:
<span class="field-validation-valid text-danger" data-valmsg-for="newMarkValue" data-valmsg-replace="true"></span>
And the input, according to the property's Range attribute [Range(2,6, ErrorMessage="Range 2 - 6."] as:
<input class="form-control text-box single-line" data-val="true" data-val-number="The field NewMark must be a number." data-val-range="Range 2 - 6." data-val-range-max="6" data-val-range-min="2" data-val-required="The NewMark field is required." id="newMarkValue" name="newMarkValue" type="number" value="0">

Answer 3

I tried everything from above but nothing seems to work for me.
I tried this , just wrote the script part in my partial view and everything worked.