Client Side Validation not working in Modal dialog - asp.net-mvc-4

Question

I have a modal popup dialog box that loads a form to be submitted to the database. the form works fine if all the fields are filled out. If i leave blank fields and click the Create button the validation should kick in but it does not. I get the following error:
Validation failed for one or more entities. See 'EntityValidationErrors' property for more details.
Now I know what the error is. The values in the fields are null and they cannot be null to submit to the database. Also ModelState is false as well.
this is my model:
using System.ComponentModel.DataAnnotations;
using MVC_CSAlerts.Models;
namespace MVC_CSAlerts.Models
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
public partial class csAlert
{
public int AlertID { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Must Enter a Route")]
public string Routes { get; set; }
[Required(AllowEmptyStrings = false, ErrorMessage = "Must Enter an Issue")]
public string Issue { get; set; }
public string Detour { get; set; }
[DisplayName("Date")]
[DataType(DataType.DateTime)]
[Required]
public Nullable<System.DateTime> DateEntered { get; set; }
[Required]
[DisplayName("Entered By")]
public string EnteredBy { get; set; }
public Nullable<int> Count { get; set; }
[DisplayName("Send Email")]
public string SendEmail { get; set; }
[DisplayName("Is this a child alert")]
public string IsChildAlert { get; set; }
}
}
this is my view
#model MVC_CSAlerts.Models.csAlert
#{
ViewBag.Title = "Create";
}
<h2>Create New Alert</h2>
<script type="text/javascript">
$(document).ready(function () {
// We will test DataPicker
$('#DateEntered').datepicker();
// We will test tabs
$(function () {
$(document).tooltip();
});
});
</script>
#using (Ajax.BeginForm("Create","Alerts",new AjaxOptions()))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<fieldset>
<legend>New Alert</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Routes)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Routes)
#Html.ValidationMessageFor(model => model.Routes)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Issue)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Issue)
#Html.ValidationMessageFor(model => model.Issue)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Detour)
</div>
<div class="editor-field">
#Html.TextAreaFor(model => model.Detour)
#Html.ValidationMessageFor(model => model.Detour)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.DateEntered)
#Html.ValidationMessageFor(Model => Model.DateEntered)
</div>
<div class="editor-field">
#Html.JQueryUI().DatepickerFor(model => model.DateEntered)
#Html.ValidationMessageFor(model => model.DateEntered)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.Count)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.Count)
#Html.ValidationMessageFor(model => model.Count)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.SendEmail)
</div>
<div class="editor-field">
#Html.DropDownListFor(model => model.SendEmail, new
SelectList(new List<object>{
new{ value = "Y", text="Yes"},
new{ value = "N",text="No"}
},
"value",
"text",
"Y"))
#* #Html.EditorFor(model => model.SendEmail)*#
#Html.ValidationMessageFor(model => model.SendEmail)
</div>
<div class="editor-label">
#Html.LabelFor(model => model.IsChildAlert)
</div> <div class="editor-field> #Html.DropDownListFor(model =>
model.IsChildAlert, new SelectList(new List<object>{
new{ value = "Y", text="Yes"},
new{ value = "N",text="No"}
},
"value",
"text",
"Y"))
#* #Html.EditorFor(model => model.IsChildAlert)*#
#Html.ValidationMessageFor(model => model.IsChildAlert)
</div>
<p>
<input type="submit" value="Create New Alert" />
</p>
</fieldset>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
How do I get the clientside validation to load? do I have to do javascript validation in the modal window?
thanks

Answer 1

Try moving your: #Scripts.Render("~/bundles/jqueryval") to the Parent View instead of having it in the Modal View.