MVC 5 Validation Error messages not appearing - asp.net

Question

I have a problem where the validation messages are not appearing for a given form. The form appears inside a jQuery modal dialog, which is opened when you click a button on the main page.
When I try submitting the form with all fields empty, I should get errors that such and such fields are required, but I don't. However, if I debug and go into the Controller code to see what Model is being reported as invalid, I see the messages mentioned here, that such and such fields are required.
I have tried removing the custom JavaScript being used in the view when Submit is done, but that doesn't solve the problem.
This is the model:
public class Expense : ActivityLog
{
[Key]
public int ID { get; set; }
public bool chargedBySeller { get; set; }
public string chargingEntity { get; set; }
[Required]
public string chargeCurrency { get; set; }
[Required]
public double chargeAmount { get; set; }
public DateTime chargeDate { get; set; }
public bool countInExpensesTotalling { get; set; }
[Required]
public string paymentMethod { get; set; }
public List<Refund> refundsDoneForThisCharge { get; set; }
}
This is the controller:
public class PurchasesController : Controller
{
private AppDbContext db = new AppDbContext();
//Other Actions removed for brevity
[HttpPost]
public ActionResult AddOrEditExpense(Expense expense)
{
if (ModelState.IsValid)
{
if (Session["expensesList"] == null)
{
Session["expensesList"] = new List<Expense>();
}
if ((int)Session["expenseAddEditMode"] == 2) //ADD
{
((List<Expense>)Session["expensesList"]).Add(expense);
}
else if ((int)Session["expenseAddEditMode"] == 1) //EDIT
{
((List<Expense>)Session["expensesList"])[(int)Session["expenseEditIndex"]] = expense;
}
}
return PartialView("~/Views/Purchases/Expense/ViewList.cshtml", Session["expensesList"]);
}
}
Finally, this is the Razor View code:
<script type="text/javascript">
$(function () {
$("#add-or-edit-expense-form").on("submit", function (e) {
e.preventDefault();
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (data) {
$("#expense-list-div").html(data);
$("#expense-dialog").dialog("close");
}
});
});
});
</script>
#model ExpOrderBluManagement_Web.Models.ApplicationModels.Expense
#using (Html.BeginForm("AddOrEditExpense", "Purchases", FormMethod.Post, new { id = "add-or-edit-expense-form" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Expense</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="form-group">
#Html.LabelFor(model => model.chargedBySeller, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.chargedBySeller)
#Html.ValidationMessageFor(model => model.chargedBySeller, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.chargingEntity, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.chargingEntity, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.chargingEntity, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.chargeCurrency, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.chargeCurrency, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.chargeCurrency, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.chargeAmount, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.chargeAmount, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.chargeAmount, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.chargeDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.chargeDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.chargeDate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.countInExpensesTotalling, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
<div class="checkbox">
#Html.EditorFor(model => model.countInExpensesTotalling)
#Html.ValidationMessageFor(model => model.countInExpensesTotalling, "", new { #class = "text-danger" })
</div>
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.paymentMethod, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.paymentMethod, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.paymentMethod, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}

Answer 1

As #Stephen sad if you dynamically add controls to the DOM, you must reparse the validator. Try writing your script like this:
<script type="text/javascript">
$(function () {
var $form = $("#add-or-edit-expense-form");
$.validator.unobtrusive.parse($form);
$form.on("submit", function (e) {
e.preventDefault();
if($form.valid()) {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (data) {
$("#expense-list-div").html(data);
$("#expense-dialog").dialog("close");
}
});
}
});
});
</script>
adding this $.validator.unobtrusive.parse($form); Also, I would check if form is valid and then do the ajax call.

Answer 2

You have jQuery Val at bottom of page, do you have a link to jQuery in head