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


    <p class="mt-2">
    Wähle das Präfix Deines Shopnamens - z. B. vorname(.mivita.care) - Du musst nicht "mivita.care" eingeben. Wähle einen kurzen und prägnanten Namen, damit Du diese URL auch auf kleinen Werbemitteln unterbringen kannst. Achte auch darauf, dass Du keine Markenrechte Dritter verletzt. Dafür kann MIVITA keine Haftung übernehmen. Daher versucht Phantasiebegriffe zu vermeiden, es sei denn Ihr habt sie als Marke angemeldet.
        <br><br>
    Deine Internetadresse kann später mit „www.“ und ohne aufgerufen werden.
        <br><br>
    <strong>WICHTIGER HINWEIS:</strong>
    Aus Deinem Shop-Namen wird die Internet-Adresse (Domain) erstellt, mit der Dein Shop aufgerufen werden kann. Wähle Deinen Shop-Namen sorgfältig aus. Dieser ist nur durch die IT änderbar und wir müssten eine Aufwandsentschädigung von 59,50 € erheben.
    </p>
    <div class="form-group">
        <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
    </div>
    <div class="from-group mt-2 mb-2 ">
        {{ Form::text('preview_user_shop_name', '',  array('placeholder'=>__('Vorschau Shop-Internet Adresse'), '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">{!!  __('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">{{__('akzeptieren und weiter') }}</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){
                                    $('#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>