Question

我有以下问题，我已经执行了一个函数，用PHP和Codeigniter更新我的数据，使用AJAX ...一切正常，但事实证明我想在执行之前使用jquery-validate验证我的表单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

您可以使用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);
  }

});

Answer 2

我为你做了一个 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;  
            }
        });       
    }

});

使用ajax

2 个答案: