addError and removeError dynamically parsley with laravel

Question

I am using parsley to validate my form, with ajax and laravel on the server side. Client-side validations work correctly by combining bootstrap styles. This the code:

$('#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});
        });

      });

    });

With this code I assign the errors returned by laravel:

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

What I am trying to do is that when the client side is revalidated, the server errors returned by laravel are eliminated and only those of parsley validation are displayed. This works individually:

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

But it is not efficient when the form contains too many fields. Any ideas to implement this? Thanks

Answer 1

This form should contain form-group-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>

then, you make ajax request

$('#saveBtn').click(function (e) {

        e.preventDefault();
        $.ajax({
            data: $('#moduleForm').serialize(),
            url: "{{ route('addModule') }}",
            type: "POST",
            dataType: 'json',
            success: function (data) {

                $('#moduleForm').trigger("reset");
                $('#ajaxModel').modal('hide');
            },
            error: function (res) {
                if (res.status === 422) {
                    var data = res.responseJSON.errors;

                    for (let i in data) {
                        showValidationErrors(i, data[i][0])
                    }
                    console.log(data);
                }
            }
        });
    });

finally, showValidationErrors function like this:

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); }

this will display all errors from the server-side.

request function from server-side

 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()];
    }}