Partial View as Bootstrap Modal client side validation not working

Question

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>

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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.

Partial View as Bootstrap Modal client side validation not working

Sign up