CODEWITHSUNDEEP
c#jqueryasp.net-mvc
user5375600
user5375600

Reputation:

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

Upvotes: 1

Views: 3474

Answers (3)

little_miso
little_miso

Reputation: 11

This one line worked well for me!

$.validator.unobtrusive.parse("#formRegister");

Upvotes: 1

user1672994
user1672994

Reputation: 10839

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.

Upvotes: 4

teo van kot
teo van kot

Reputation: 12491

I suppose you just write wrong selector, this is what should be:

$('form#frmClient').data('validator', null); 
$.validator.unobtrusive.parse('form#frmClient');

I add first line in case if you already have validator on form somehow and you need to rebind it.

Upvotes: 2

Related Questions