addError и removeError динамически петрушка с laravel - PullRequest
Новая
       40

addError и removeError динамически петрушка с laravel

0 голосов
/ 02 октября 2019

Я использую петрушку для проверки моей формы с 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: 

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

Но это неэффективно, когда форма содержит слишком много полей. Есть идеи для реализации этого? Спасибо

1 Ответ

0 голосов
/ 02 октября 2019

Эта форма должна содержать форму-группу- 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>

, затем вы делаете ajax-запрос 

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

наконец,Функция 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()];
    }}
...