验证使用jQuery验证表单使用AJAX

Question

我有以下问题，我执行了一个函数来更新我的数据与PHP和Codeigniter，也使用AJAX ..一切工作正常，但事实证明，我想验证我的使用jQuery的验证执行AJAX请求，在此之前已经形式，我有我的验证规则，我的代码如下：

function edit(id = null) { 

    if (!id) { 
     alert('error'); 
     return; 
    } 

    $.ajax({ 
     url: 'roles/get_data_id/' + id, 
     type: 'post', 
     dataType: 'json', 
     success: function(response) { 
      $("#edit_name").val(response.Name); 
      $("#edit_description").val(response.Description);  

      $("#form_edit").unbind('submit').bind('submit', function() { 
       var form = $(this); 

       $.ajax({ 
        url: form.attr('action') + '/' + id, 
        type: 'post', 
        data: form.serialize(), 
        dataType: 'json', 
        success: function(response) { 
         if(response.success === true) { 
          $("#modal_edit").modal('hide'); 

          alert('The data were updated'); 

          $("#form_edit")[0].reset(); 
          table_data.ajax.reload(null, false); 
         } else { 
          $("#modal_edit").modal('hide'); 
          alert('Error updating data'); 
         } 
        }// /succes 
       }); // /ajax 
       return false; 
      });  
     } 
    }); 
} 

代码工作很好..更新我的数据。现在我的问题是在哪里用我的验证规则添加以下代码：

$('#form_edit').validate({ 
    highlight: function (input) { 
     $(input).parents('.form-line').addClass('error'); 
    }, 
    unhighlight: function (input) { 
     $(input).parents('.form-line').removeClass('error'); 
    }, 
    errorPlacement: function (error, element) { 
     $(element).parents('.form-group').append(error); 
    } 
}); 

这是我当前的代码：

function edit(id = null) { 

    if (!id) { 
    alert('error'); 
    return; 
    } 

    $.ajax({ 
    url: 'roles/get_data_id/' + id, 
    type: 'post', 
    dataType: 'json', 
    success: function(response) { 
     $("#edit_name").val(response.Name); 
     $("#edit_description").val(response.Description); 

     $('#form_edit').validate({ 
     highlight: function(input) { 
      $(input).parents('.form-line').addClass('error'); 
     }, 
     unhighlight: function(input) { 
      $(input).parents('.form-line').removeClass('error'); 
     }, 
     errorPlacement: function(error, element) { 
      $(element).parents('.form-group').append(error); 
     }, 
     submitHandler: function() { 

      $.ajax({ 
      url: form.attr('action') + '/' + id, 
      type: 'post', 
      data: form.serialize(), 
      dataType: 'json', 
      success: function(response) { 
       if (response.success === true) { 
        $("#modal_edit").modal('hide'); 

        alert('The data were updated'); 

        $("#form_edit")[0].reset(); 
        table_data.ajax.reload(null, false); 
       } else { 
        $("#modal_edit").modal('hide'); 
        alert('Error updating data'); 
       } 
       } // /succes 
      }); // /ajax 
      return false; 
     } 
     }); 
    } 
    }); 
} 

这段代码我的表单：

<div class="modal fade" id="modal_edit" tabindex="-1" role="dialog"> 
    <div class="modal-dialog modal-sm" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h4 class="modal-title" id="smallModalLabel">Edit rol</h4> 
     </div> 
     <form id="form_edit" action="<?php echo base_url();?>rol/edit" method="POST"> 
     <div class="modal-body"> 
      <div class="form-group form-float"> 
      <label class="form-label">Name</label> 
      <div class="form-line"> 
       <input type="text" id="edit_name" name="edit_name" class="form-control" maxlength="20" minlength="5" required> 
      </div> 
      </div> 
      <div class="form-group form-float"> 
      <label class="form-label">Description</label> 
      <div class="form-line"> 
       <textarea id="edit_description" name="edit_description" rows="3" class="form-control no-resize" required></textarea> 
      </div> 
      </div> 
     </div> 
     <div class="modal-footer"> 
      <button type="submit" class="btn btn-link waves-effect">update</button> 
      <button type="button" class="btn btn-link waves-effect" data-dismiss="modal">Cancel</button> 
     </div> 
     </form> 
    </div> 
    </div> 
</div> 

Answer 1

我使你成为WORKING DEMO， 我希望你的身影了解如何从那里继续。

HTML的变化：

<form id="form_edit"> 
<button id="submitForm" type="submit" class="btn btn-link waves-effect">update</button> 

的JavaScript：

$(document).ready(function() { 

$("#submitForm").on("click", edit); 

    // introduce the validation rules to the form! 
    $('#form_edit') 
     .validate({ 
      highlight: function(input) { 
       $(input).parents('.form-line').addClass('error'); 
      }, 
      unhighlight: function(input) { 
       $(input).parents('.form-line').removeClass('error'); 
      }, 
      errorPlacement: function(error, element) { 
       $(element).parents('.form-group').append(error); 
      }, 
      submitHandler: function(form) { 
       //Will execute only when the form passed validation. 
       OnSubmit(form); 
      } 
     }); 


    function OnSubmit(form) { 
     $.ajax({ 
      url: form.attr('action') + '/' + id, 
      type: 'post', 
      data: form.serialize(), 
      dataType: 'json', 
      success: function(response) { 
       if (response.success === true) { 
        $("#modal_edit").modal('hide'); 
        alert('The data were updated'); 
        $("#form_edit")[0].reset(); 
        table_data.ajax.reload(null, false); 
       } else { 
        $("#modal_edit").modal('hide'); 
        alert('Error updating data'); 
       } 
      } // /success 
     }); // /ajax 
    } 


    function edit(id = null) { 

     if (!id) { 
      alert('error'); 
      return; 
     } 

     $.ajax({ 
      url: 'roles/get_data_id/' + id, 
      type: 'post', 
      dataType: 'json', 
      success: function(response) { 
       $("#edit_name").val(response.Name); 
       $("#edit_description").val(response.Description);  

       return false; 
      } 
     });  
    } 

}); 

Answer 2

您可以使用jQuery的验证提供的submitHandler，这样的AJAX将仅在验证规则传递：

$('#form_edit').validate({ 
    highlight: function(input) { 
    $(input).parents('.form-line').addClass('error'); 
    }, 
    unhighlight: function(input) { 
    $(input).parents('.form-line').removeClass('error'); 
    }, 
    errorPlacement: function(error, element) { 
    $(element).parents('.form-group').append(error); 
    }, 
    submitHandler: function() { 
    //your AJAX code goes here 
    edit(your_id_param_goes_here); 
    } 

});