Javascript 添加错误和删除错误动态欧芹与laravel

我使用欧芹验证我的表单，服务器端使用ajax和laravel。通过组合引导样式，客户端验证可以正常工作。这是代码：

$('#form_create').parsley({
      errorClass: 'is-invalid',
      successClass: 'is-valid',
      errorsWrapper: '<span class="invalid-feedback"></span>',
      errorTemplate: '<div></div>'
    }).on('form:validate', function (formInstance) {
      console.log('Event: form:validate');

    }).on('form:error', function(formInstance){

      let errors = formInstance.fields.length;
      let message = errors === 1
      ? 'check the field marked in red'
      : 'check the ' +  errors + ' fields marked in red';

      showErrorsForm(message);

    }).on('form:submit', function() {
      return false;
    }).on('form:success', function(){

      $("#btn_submit").prop('disabled', 'disabled');

      $.ajax({
        method: "POST",
        url: $("#form_create").attr('action'),
        data: $("#form_create").serialize()
      }).done( function(data, textStatus, jqXHR) {
        console.log('Done');
      }).fail( function (jqXHR, textStatus, errorThrown) {

        $("#btn_submit").removeAttr('disabled');

        $.each(jqXHR.responseJSON.errors, function(key,value){
          $("#"+key).parsley().addError('errorServer', {message: value, updateClass: true});
        });

      });

    });

我试图做的是，当客户端重新验证时，由laravel返回的服务器错误被消除，并且只显示那些欧芹验证的错误。这项工作是单独进行的：

$('#name').parsley().on('field:validate', function() {
      $(this.$element).parsley().removeError('errorServer', {updateClass: true});
    });

---

但是，当表单包含太多字段时，它是无效的。有什么想法来实现这一点吗？谢谢

此表单应包含表单组-id

<form id="moduleForm" name="moduleForm" class="form-horizontal">
<input type="hidden" name="id" id="id">
<meta name="csrf-token" content="{{ csrf_token() }}">

<div class="form-group" id="form-group-name">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-12">
        <input type="text" id="name" name="name"
               value="{{ $module->name }}" maxlength="50" required=""
               class="form-control">
        <span style="color: red" class="help-block"></span>
    </div>

</div>

<div class="form-group" id="form-group-controller">
    <label class="col-sm-2 control-label">Controller</label>
    <div class="col-sm-12">
        <input value="{{ $module->controller }}" id="controller" name="controller" required=""
               class="form-control">
        <span style="color: red" class="help-block"></span>
    </div>
</div>

<div class="col-sm-offset-2 col-sm-10">
    <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save
        changes
    </button>
</div>

最后，showValidationErrors的功能如下：

function showValidationErrors(name, error) {

var input = $("#"+ name);
input.addClass('is-invalid');
var group = $("#form-group-" + name);
group.addClass('has-error');
group.find('.help-block').text(error); }

这将显示服务器端的所有错误

从服务器端请求函数

 public function addModule(Request $request)
{
    $rules = array(
        'name' => 'required',
        'action' => 'required',
        'controller' => 'required',
        'display_name' => 'required|min:2'
    );

    $validator = Validator::make(Input::all(), $rules);

    if ($validator->fails()) {
        return ['status' => 422, 'errors' => $validator->errors()];
    }}

function showValidationErrors(name, error) {

var input = $("#"+ name);
input.addClass('is-invalid');
var group = $("#form-group-" + name);
group.addClass('has-error');
group.find('.help-block').text(error); }

 public function addModule(Request $request)
{
    $rules = array(
        'name' => 'required',
        'action' => 'required',
        'controller' => 'required',
        'display_name' => 'required|min:2'
    );

    $validator = Validator::make(Input::all(), $rules);

    if ($validator->fails()) {
        return ['status' => 422, 'errors' => $validator->errors()];
    }}