jquery validation plugin with partial view ajax loaded

jquery validation plugin with partial view ajax loaded

I'm using  Jquery Validation  plugin for validate my remotely loaded partial view form modal .
  2. var formDataSource = $('#frmDataSource').validate({
  3.     rules: {
  4.         provider: { required: true },
  5.         stype: { required: true },
  6.         url: { required: true },
  7.         uname: { required: true, digits: true },
  8.         pword: { required: true }
  9.     },
  10.     messages: {
  11.         provider: { required: 'Please enter provider name' },
  12.         stype: { required: 'Please select type' },
  13.         url: { required: 'Please enter url' },
  14.         uname: { required: 'Please enter user name' },
  15.         pword: { required: 'Please enter password' }
  16.     },
  17.     errorPlacement: function(error, element) {
  18.         error.insertAfter(element.parent());
  19.     },
  20.     submitHandler: function (form) {
  21.          //submit form
  22.     }
  23. });
My Partial view

  2. <div class="modal-body no-padding">
  3.     @using (Html.BeginForm("AddProvider", "DataSource", FormMethod.Post, new { id = "frmDataSource", @class = "smart-form" }))
  4.     {
  5.         <fieldset>
  6.             <div class="row">
  7.                 <section class="col col-5">
  8.                     <label class="select">
  9.                         <i class="icon-append fa fa-question-circle"></i>
  10.                         @Html.DropDownList("providers", ViewBag.ProviderSelectList as List<SelectListItem>, new { name = "provider", placeholder = "Provider Name" })
  11.                         <i></i>
  12.                     </label>
  13.                 </section>
  14.                 <section class="col col-3 col-lg-offset-3">
  15.                     <label class="toggle">
  16.                         @Html.CheckBoxFor(d => d.IsActive, new { name = "chkbxactive" })
  17.                         <i data-swchon-text="ON" data-swchoff-text="OFF"></i>Active
  18.                     </label>
  19.                 </section>

  21.             </div>
  22.             <div class="row">
  23.                 <section class="col col-5">
  24.                     <label class="select">
  25.                         <select name="stype" class="input-sm" required="">
  26.                             <option value="1">FTP</option>
  27.                         </select> <i></i>
  28.                     </label>
  29.                 </section>
  30.                 <section class="col col-5">
  31.                     <label class="input">
  32.                         <i class="icon-append fa fa-question-circle"></i>
  33.                         @Html.TextBoxFor(d => d.Address, new { name = "url", placeholder = "URI" })
  34.                         <b class="tooltip tooltip-bottom-right"><i class="fa fa-warning txt-color-teal"></i> URI</b>
  35.                     </label>
  36.                 </section>
  37.             </div>
  38.             <div class="row">
  39.                 <section class="col col-5">
  40.                     <label class="input">
  41.                         <i class="icon-append fa fa-question-circle"></i>
  42.                         @Html.TextBoxFor(d => d.UserName, new { name = "uname", placeholder = "Username" })
  43.                         <b class="tooltip tooltip-bottom-right"><i class="fa fa-warning txt-color-teal"></i> Username</b>
  44.                     </label>
  45.                 </section>
  46.                 <section class="col col-5">
  47.                     <label class="input">
  48.                         <i class="icon-append fa fa-question-circle"></i>
  49.                         @Html.TextBoxFor(d => d.Password, new { name = "pword", placeholder = "Password", type = "password" })
  50.                         <b class="tooltip tooltip-bottom-right"> <i class="fa fa-warning txt-color-teal"></i> Password</b>
  51.                     </label>
  52.                 </section>
  53.             </div>
  54.         </fieldset>
  55.         <footer>
  56.             <button type="button" class="btn btn-default" data-dismiss="modal">
  57.                 Cancel
  58.             </button>
  59.             <button id="btn-frmsubmit" type="submit" class="btn btn-info">
  60.                 Save
  61.             </button>
  62.         </footer>
  63.     }
  64. </div>
above code isn't validating and submitting then i tried this

  2. $(document).on('submit', '#frmDataSource', function(e) {
  3.     e.preventDefault();
  4.     var validator = $("#frmDataSource").validate({
  5.         rules: {
  6.             provider: { required: true },
  7.             stype: { required: true },
  8.             url: { required: true },
  9.             uname: { required: true, digits: true },
  10.             pword: { required: true }
  11.         },
  12.         messages: {
  13.             provider: { required: 'Please enter provider name' },
  14.             stype: { required: 'Please select type' },
  15.             url: { required: 'Please enter url' },
  16.             uname: { required: 'Please enter user name' },
  17.             pword: { required: 'Please enter password' }
  18.         },
  19.         errorPlacement: function(error, element) {
  20.             error.insertAfter(element.parent());
  21.         }
  22.     });

  24. })

still form isn't submitting what was the problem with my code ? how to submit form when it remotely loaded?

Regard      s