Unobtrusive JQuery Validation not working in popup PartialViews [duplicate] - asp.net-mvc

Question

This question already has an answer here:
Required field validations not working in JQuery Popup MVC 4
(1 answer)
Closed 7 years ago.
I have the following a partial view in asp.net 5 mvc 6 project. The partial view is shown as a jquery ui dialog and is loaded dynamically when the user clicks a button in the parent view page.The issue is that the Unobtrusive JQuery Validation does not work after I enter invalid entires and clicked submit.
I have done all the procedures needed to make Unobtrusive JQuery Validation work and it works in Non partial views.
Here is my code
my partial view name EquipmentEditTemplate.cshtml
#model MyProject.Models.EquipmentViewModel
#*<form role="form" name="FormPost" asp-controller="Asset" method="post" asp-action="SaveEq" data-ajax="true" id="FrmGrid_grdLocation1" class="FormGrid form-horizontal" style="width:477px;height:703px;">*#
#*<form asp-controller="Asset" asp-action="SaveEq" method="post" style="width:600px;height:703px;" class="form-horizontal" >*#
<div class="FormError bg-danger" style="display:none;"></div><div class="tinfo topinfo"></div><div class="modal-body">
<div style="margin-left:15px;">
<div class="form-group">
<label asp-for="EquipmentID" class="col-sm-2 control-label">Equipment ID:</label>
<div class="col-sm-10">
<input asp-for="EquipmentID" class="FormElement form-control" />
<span asp-validation-for="EquipmentID" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="Email" class="col-sm-2 control-label">Email:</label>
<div class="col-sm-10">
<input asp-for="Email" class="FormElement form-control" />
</div>
</div>
<div class="form-group">
<label asp-for="Department" class="col-sm-2 control-label">Department:</label>
<div class="col-sm-10">
<input type="text" id="Department" name="Department" value="#Model.Department" role="textbox" class="FormElement form-control">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</div>
</form>
I have the code below in the main view as shown I have included the validation scripts in there equipment.cshtml
#{
ViewData["Title"] = "Equipment";
}
<h2>#ViewData["Title"].</h2>
<h3>#ViewData["Message"]</h3>
#section scripts{
#{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
<script src="~/js/equipment.js" type="text/javascript"></script>
}
I have my model class defined as follows
public class EquipmentViewModel
{
[Required]
public int EquipmentID { get; set; }
[EmailAddress]
public string Email{ get; set; }
public int Description{ get; set; }
}
}

Answer 1

When you've loaded a form in to your DOM dynamically then add the below line at the end of your partial view.
$(document).ready(function() {
$.validator.unobtrusive.parse($('#yourform'));
});