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>{{ __('open your shop') }}</h4>

    {!! Form::open(['url' => 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


    <div class="form-group">
        <label class="form-label" for="shop_name">{{ __('Choose Your Shop Name') }}</label><br>
        <div class="input-group mt-2 mb-2 ">
            {{ Form::text('user_shop_name', old('user_shop_name'),  array('placeholder'=>__('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> prüfen!</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
        <p class="mt-2">{{__('shop_name_description')}}</p>

    </div>
    <hr>
    <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">{!!  __('Declaration of shop')  !!}
                <button type="button" class="btn btn-outline-primary btn-sm update_modal_data_load" data-url="{{ route('loading_modal') }}" data-data="shop_term_of_use" data-target="#modal-loading">{{__('Terms of Use')}}</button>
                </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">{{__('save and continue') }}</button>&nbsp;

    </div>

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

</div>

<script type="application/javascript">

    $( document ).ready(function() {
        $.extend($.validator.messages, {
            required: "Dieses Feld ist ein Pflichtfeld.",
            maxlength: $.validator.format("Geben Sie bitte maximal {0} Zeichen ein."),
            minlength: $.validator.format("Geben Sie bitte mindestens {0} Zeichen ein."),
            rangelength: $.validator.format("Geben Sie bitte mindestens {0} und maximal {1} Zeichen ein."),
            email: "Geben Sie bitte eine gültige E-Mail Adresse ein.",
            url: "Geben Sie bitte eine gültige URL ein.",
            date: "Bitte geben Sie ein gültiges Datum ein.",
            number: "Geben Sie bitte eine Nummer ein.",
            digits: "Geben Sie bitte nur Ziffern ein.",
            equalTo: "Bitte denselben Wert wiederholen.",
            range: $.validator.format("Geben Sie bitte einen Wert zwischen {0} und {1} ein."),
            max: $.validator.format("Geben Sie bitte einen Wert kleiner oder gleich {0} ein."),
            min: $.validator.format("Geben Sie bitte einen Wert größer oder gleich {0} ein."),
            creditcard: "Geben Sie bitte eine gültige Kreditkarten-Nummer ein."
        });

        // 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) return true;
                                else {
                                    message = response.errors.user_shop_name;
                                    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>