P.Joe P.Joe - 11 months ago 98
jQuery Question

Partial View as Bootstrap Modal client side validation not working

I'm having difficulty getting client side validation to work in a modal popup which is in a partial view. I call it in main

.cshtml
file using a button.

<div>
@Html.ActionLink("Add", "_MyPartial", "MyController", new { clientID = "0" }, new {@id = "btnAdd", })
</div>


The partial view loads the modal popup really well and I can do CRUD on it all. It looks like this.

@using(Html.BeginForm("_MyPartial", "MyController", FormMethod.Post, new { id = "frmClient" }))
{
<div class="modal-content panel panel-info">
<div class="modal-header panel-heading">
<button type = "button" class="close" data-dismiss="modal">&times;</button>
</div>

<div class="panel-body bootstrap-padding-overide">
@Html.ValidationSummary(false, null, new { @id = "ValidationSummary", @class = "validationErrorBox" })
</div>

<div class="modal-body panel-body bootstrap-padding-overide">
<div>
@Html.LabelFor(m => m.selectName)
@Html.TextBoxFor(m => m.selectName, new { @class = "form-control" })
</div>
<div>
<input type = "submit" name="submitButton" value="Submit" class="btn btn-default" />
</div>
</div>
</div>
}

@section MyScripts
{
<script type="text/javascript">
$.validator.unobtrusive.parse("#frmClient form");
</script>
}


So I have all the .js file available loaded in the layout page and a required field in my ViewModel.

[Required(ErrorMessage = "Please Insert a Name")]
[Display(Name = "Persons Name")]
public string selectName { get; set; }


The popup container is in layout.cshtml as well as the Jquery that handles the modal...

So when I submit it just posts to the controller action. I wondered if anyone can suggest where I am going wrong with this.

* RESOLVED*
I was helped considerably here by the posters below. I did alot of button bashing because of lack of understanding. So I wanted to comment to resolve where I got this to work.

I put the following into the partial page inside the
html.BeginForm
helper method. So before
jQuery document.ready
function. Please correct me and I will amend.

@using (Html.BeginForm("_MyPartial", "MyControlloer", FormMethod.Post, new { id = "frmClient" }))
{
<script type="text/javascript">
$('form#frmClient').removeData("validator");
$('form#frmClient').removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse($('form#frmClient'));
</script>
}

Answer Source

Since partial view loads so you have to re-add the form validation like mentioned below

    $("form").removeData("validator");
    $("form").removeData("unobtrusiveValidation");
    $.validator.unobtrusive.parse($('form'));

Add these lines in your partial view loaded handler or handler of action link.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download