gruene-seele/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(['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">
    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 gruene-seele.bio keine Haftung übernehmen. Daher versucht Phantasiebegriffe zu vermeiden, es sei denn Du hast 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("Gib bitte maximal {0} Zeichen ein."),
            minlength: $.validator.format("Gib bitte mindestens {0} Zeichen ein."),
            rangelength: $.validator.format("Gib bitte mindestens {0} und maximal {1} Zeichen ein."),
            email: "Gib bitte eine gültige E-Mail Adresse ein.",
            url: "Gib bitte eine gültige URL ein.",
            date: "Bitte gib ein gültiges Datum ein.",
            number: "Gib bitte eine Nummer ein.",
            digits: "Gib bitte nur Ziffern ein.",
            equalTo: "Bitte denselben Wert wiederholen.",
            range: $.validator.format("Gib bitte einen Wert zwischen {0} und {1} ein."),
            max: $.validator.format("Gib bitte einen Wert kleiner oder gleich {0} ein."),
            min: $.validator.format("Gib bitte einen Wert größer oder gleich {0} ein."),
            creditcard: "Gib 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>