remote validation does not work for partial view - asp.net-mvc

Question

I have order with several order items and I use partial view to load order items. I want to validate OrderLineItemEntity's ProductCode but it does not work. Every other property validation works which is not in partial view. How can I force to validate partial view too?
Order View:
<div id="orderLineItemsContainer" class="form-group">
#Html.EditorFor(model => model.OrderLineItems)
</div>
OrderLineItems View:
#model SalesManagementSystem.Models.OrderEntity
#Html.EditorFor(model => model.OrderLineItems)
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
OrderLineItem View:
#model SalesManagementSystem.Models.OrderLineItemEntity
<div class="form-inline col-md-12" style="margin-bottom: 5px">
<div class="form-group col-md-6">
#Html.LabelFor(model => model.ProductCode, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-8">
#Html.EditorFor(model => model.ProductCode, new { htmlAttributes = new { #class = "form-control", id = "ProductCode" } })
#Html.ValidationMessageFor(model => model.ProductCode, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group col-md-6">
#Html.LabelFor(model => model.Quantity, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.Quantity, new { htmlAttributes = new { #class = "form-control", id = "ProductQuantity" } })
#Html.ValidationMessageFor(model => model.Quantity, "", new { #class = "text-danger" })
</div>
</div>
#if (Model != null)
{
<a onclick="deleteRow('#Model.ProductCode')">Delete</a>
}
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
ValidationController:
public JsonResult IsProductCodeValid(int ProductCode){...}
This is how I update my order items when new item is added. I think I need to add something here.
$("#btnAdd").click(function () {
var order = {
'Id': $("#Id").val(),
'Date': $("#Date").val(),
'ConsultantId': $("#ConsultantId").val(),
'OrderLineItems': getOrderLineItems()
};
$.ajax({
url: '#Url.Action("AddOrderItem", "Orders")',
type: "POST",
data: {
order: order
},
success: function (partialView) {
$("#orderLineItemsContainer").html(partialView);
},
failure: function (response) {
alert("failed");
}
});
});
Update:
I tried adding
jQuery.validator.unobtrusive.parse("#ProductCode");
And
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
Still not working

Answer 1

you can add a name and id (like ProductForm) property to your partial view form
after that, in cshtml file's script section
you can add a screen control method like this
function ScreenControl() {
if ($('#ProductForm')[0].checkValidity()) {
// do what do you want
} else {
$("#btnSave2").click();
}
}
and you should add 2 buttons to bottom of the form, one of them should be hidden like
<label class="col-md-1 control-label"></label>
<div class="col-md-1">
<button class="btn btn-sm btn-primary" style="float: right" type="button" id="btnSave" name="btnSave" value="Save" onclick="ScreenControl()">
<i class="fa fa-save"></i>
Save
</button>
</div>
<button class="btn btn-sm btn-primary" type="submit" id="btnSave2" name="btnSave2" value="Save" style="display: none">
<i class="fa fa-save"></i> Save
</button>