Javascript 使用jquery验证表单使用ajax验证

我有以下问题，我已经使用PHP和Codeigniter执行了一个函数来更新我的数据，还使用了AJAX。。一切正常，但事实证明，我希望在执行AJAX请求之前使用jquery validate验证我的表单，因为我已经有了验证规则，我的代码如下所示：

函数编辑（id=null）{
如果（！id）{
警报（“错误”）；
返回；
}
$.ajax({
url:'roles/get_data_id/'+id，
键入：“post”，
数据类型：“json”，
成功：功能（响应）{
$（“#编辑名称”）.val（response.name）；
$（“编辑描述”）.val（response.description）；
$（“#表单编辑”）.unbind（'submit'）.bind（'submit'，function（）{
变量形式=$（此）；
$.ajax({
url:form.attr（'action'）+'/'+id，
键入：“post”，
数据：form.serialize（），
数据类型：“json”，
成功：功能（响应）{
如果（response.success==true）{
$（“#modal_edit”）.modal（'hide'）；
警报（“数据已更新”）；
$（“#表单编辑”）[0]。重置（）；
表_data.ajax.reload（null，false）；
}否则{
$（“#modal_edit”）.modal（'hide'）；
警报（“错误更新数据”）；
}
}///成功
})；///ajax
返回false；
});       
}
});
}

代码运行良好。。更新我的数据。。现在我的问题是在何处添加以下代码和验证规则：

$（'form#u edit'）。验证({
突出显示：功能（输入）{
$（输入）.parents（'.formline'）.addClass（'error'）；
},
取消高亮度：功能（输入）{
$（输入）.parents（'.formline'）.removeClass（'error'）；
},
errorPlacement:函数（错误，元素）{
$（元素）.parents（'.form group'）.append（错误）；
}
});

这是我当前的代码：

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>

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

});

我给你做了一个，
我希望你能想出如何从那里继续下去

HTML更改：

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

验证工作正常，但它将我发送到一个空白页中的操作，我必须在ajax@FernandoBanegas好啊有问题吗？你需要更多的帮助吗？是的，我已经放置了你提到的代码。验证是有效的，但我没有更新数据，很明显，《行动邮报》没有更新数据work@FernandoBanegas你说过在你的问题中，
AJAX
是有效的。因此，它现在也应该可以工作了。当然它工作了，但是现在添加了代码，没有更新，并且没有更新和显示警报，而是向我发送一个带有我函数url的空白页面，我将上传代码，因为到目前为止我有以下错误：未捕获的SyntaxError:意外令牌函数。我不知道是否应该在验证规则的末尾写一个“，”。。在启动OnSubmit函数之前，我遇到语法错误问题，它无法工作。在编辑函数中，我根据id检索数据，并在模式窗口中将它们带到我的窗体中。。但现在它不需要任何东西，我得到了这个错误：uncaughtreferenceerror:edit不是defined@FernandoBanegas您没有将调用发布到
edit
函数，但您可以尝试将其设置为全局。我会将代码放入我的问题中，从modalCopy中的我的表单复制问题中的我表单的代码，以便更好地理解它。我正在学习使用ajax，这让我抓狂。您在
.validate（）
的
submitHandler
中有一个
.ajax（）
函数，您将它放在另一个
.ajax（）
函数中！
 $(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;  
            }
        });       
    }

});