Unobtrusive JQuery Validation not working in popup PartialViews

Question

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; }
    }
}

score 7 · Accepted Answer · answered Dec 16 '15 at 19:57

7

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'));
});

answered Dec 16 '15 at 19:57

Krishnraj Rana

6,516
2
29
36

Thanks your solution works. I just have to put that when the html load is complete on the partial view. I also have found a more detailed solution in http://code.davidferguson.me.uk/post/47540738095/mvc-client-validation-after-partialview-loaded-via" – Helen Araya Dec 16 '15 at 21:50
2

This is unbelievable - this is like top secret hidden buried treasure. Why is something so important so unbelievably hard to find? It seems so obvious, just include the library in the header and it should just work. Yet instead, when its inside a popup you need some special secret method to make it work. WOW – Iofacture Jun 08 '19 at 03:28
In my case, I had to add something like `$('#yourform').removeData("validator").removeData("unobtrusiveValidation");` before, for it to work correctly. – sergiol Jul 06 '23 at 10:05

Unobtrusive JQuery Validation not working in popup PartialViews

1 Answers1