mivita/resources/views/user/components/user_shop_register.blade.php

<div class="card-body" style="background: #fff; border: 1px solid rgba(24, 28, 33, 0.06);">
    <h4>{{ __('shop.open_your_shop') }}</h4>

    {!! Form::open(['action' => route('user_shop_register_form'), 'class' => 'form-horizontal' , 'id'=>'data-shop-form-validations']) !!}
    @php
        $shop_name_btn_color = 'btn-secondary';
        $shop_name_fa =  '';
        $shop_name_form_control = '';
    @endphp
    @if(Session::has('shop-name-error'))
        @if(Session::get('shop-name-error') == 'check')
            @php
                $shop_name_btn_color = 'btn-success';
                $shop_name_fa = 'fa-check';
                $shop_name_form_control = ' is-valid';
            @endphp

        @endif
        @if(Session::get('shop-name-error') == 'error')
            @php
                $shop_name_btn_color = 'btn-danger';
                $shop_name_fa = 'fa-times';
                $shop_name_form_control = ' is-invalid';
            @endphp
        @endif
    @endif


    <p class="mt-2">
        {!! __('shop.open_copy_1') !!}
        <br><br>
        {!!  __('shop.open_copy_2') !!}
        <br><br>
    <strong>{{ __('shop.open_note_hl') }}</strong><br>
        {{ __('shop.open_note_1') }}   
    </p>
    <div class="form-group">
        <div class="input-group mt-2 mb-2 ">
            {{ Form::text('user_shop_name', old('user_shop_name'),  array('placeholder'=>__('shop.your_shop_name'), 'class'=>'form-control'.$shop_name_form_control.($errors->has('user_shop_name') ? ' is-invalid' : ''), 'id'=>'user_shop_name', 'tabindex' => 2)) }}
            <span class="input-group-append">
                      <button class="btn {{ $shop_name_btn_color }}" type="submit" name="shop_submit" value="check"><i class="fa {{ $shop_name_fa }}"></i> {{ __('shop.check') }}!</button>
                 </span>
        </div>
        @if ($errors->has('user_shop_name'))
            <span class="invalid-feedback" style="display: inline-block;">
                <strong>{{ $errors->first('user_shop_name') }}</strong>
            </span>
        @endif
    </div>
    <div class="from-group mt-2 mb-2 ">
        {{ Form::text('preview_user_shop_name', '',  array('placeholder'=>__('shop.preview_shop_internet_address'), 'class'=>'form-control', 'id'=>'preview_user_shop_name', 'readonly')) }}
    </div>
    <div class="form-group">
        <label class="custom-control custom-checkbox m-0">
            <input type="checkbox" class="custom-control-input {{ $errors->has('user_shop_active') ? 'is-invalid' : '' }}" name="user_shop_active" id="user_shop_active" tabindex = "1">
            <span class="custom-control-label">{!!  __('shop.declaration_of_shop')  !!}</span>

        </label>
        @if ($errors->has('user_shop_active'))
            <span class="invalid-feedback" style="display: inline-block;">
                    <strong>{{ $errors->first('user_shop_active') }}</strong>
                </span>
        @endif
    </div>
    <hr>
    <div class="text-left mt-3">
        <button type="submit" class="btn btn-secondary" name="shop_submit" value="action">{{__('shop.accept_and_next') }}</button>&nbsp;

    </div>

    {!! Form::close() !!}

</div>

<script type="application/javascript">

    $( document ).ready(function() {
        
        $.extend( $.validator.messages, {
            required: "{{__('account.validator_required')}}",
            maxlength: $.validator.format( "{{__('account.validator_maxlength')}}" ),
            minlength: $.validator.format( "{{__('account.validator_minlength')}}" ),
            rangelength: $.validator.format( "{{__('account.validator_rangelength')}}" ),
            email: "{{__('account.validator_email')}}",
            url: "{{__('account.validator_url')}}",
            date: "{{__('account.validator_date')}}",
            number: "{{__('account.validator_number')}}",
            digits: "{{__('account.validator_digits')}}",
            equalTo: "{{__('account.validator_equalTo')}}",
            range: $.validator.format( "{{__('account.validator_range')}}" ),
            max: $.validator.format( "{{__('account.validator_max')}}" ),
            min: $.validator.format( "{{__('account.validator_min')}}" ),
            creditcard: "{{__('account.validator_creditcard')}}"
        });


        // Set up validator
        var message = 'Default error message';
        $('#data-shop-form-validations').validate({
            rules: {
                'user_shop_name': {
                    required: true,
                    remote:
                        {
                            url: "{{ route('user_shop_name_check') }}",
                            type: "post",
                            data:
                                {
                                    user_shop_name: function()
                                    {
                                        return $('#data-shop-form-validations :input[name="user_shop_name"]').val();
                                    }
                                },
                            encode: true,
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            dataFilter: function(response) {
                                response = $.parseJSON(response);
                                console.log(response);
                                if (response.success === true){
                                    $('#preview_user_shop_name').val(response.preview_user_shop_name);
                                    return true;
                                }
                                else {
                                    message = response.errors.user_shop_name;
                                    $('#preview_user_shop_name').val('');
                                    return false;
                                }
                            }
                        }
                },
            },
            errorPlacement: function errorPlacement(error, element) {
                $(element).parents('.form-group').find('.input-group').after(
                    error.addClass('invalid-feedback d-block font-weight-bold')
                )
            },
            highlight: function (element) {

                $(element).parent().find('button').removeClass('btn-success');
                $(element).parent().find('button').addClass('btn-danger');
                $(element).parent().find('button i').removeClass('fa-check');
                $(element).parent().find('button i').addClass('fa-times');

                $(element).removeClass('is-valid');
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
                $(element).addClass('is-valid');

                $(element).parent().find('button').removeClass('btn-danger');
                $(element).parent().find('button').addClass('btn-success');
                $(element).parent().find('button i').removeClass('fa-times');
                $(element).parent().find('button i').addClass('fa-check');

                $(element).parents('.form-group').find('.is-invalid').removeClass('is-invalid');
            },
            messages :  {
                required: "{{__('This field is required.')}}",
                user_shop_name: {
                    email: "{{ __('Please enter a valid email address.') }}",
                    remote : function(){ return message; }
                },
            },
            onkeyup:  function(element) {$(element).valid()},
        });
    });
</script>