ferdinandfrank / vue-forms

Set of Vue.js components to submit forms with ajax.
https://ferdinandfrank.github.io/vue-forms/
MIT License
5 stars 0 forks source link

Validate but not show Alert with Error? #9

Closed pieinn closed 6 years ago

pieinn commented 6 years ago

Hi, please advice input field is validated but not show Alert with error.

I use https://github.com/Propaganistas/Laravel-Phone

MyController :

public function sendSmsToken(Request $request)
    {
        $this->validate($request, [
            'phone' => 'phone:KZ',
        ]);

        $user = User::all()->where('phone', $request->input('phone'))->first();

        if ($user) {
            $token = random_int(10000, 99999);

            $request->session()->put('phone', $user->phone);

            $request->session()->put('sms_token', $token);

            SmsToken::create([
                'user_id' => $user->id,
                'sms_token' => $token,
            ]);

            $user->notify(new AuthenticateUserNotification($user));

            return response()->json([
                'redirect' => route('auth.validateSmsToken'),
                'alert' => [
                    'title'   => 'Sms Send It',
                    'message' => 'Sms Send It',
                    'accept'  => 'Ok!',
                    'type'    => 'success',
                ]
            ]);
        } else {
            return response()->json([
                'alert' => [
                    'title'   => Input::get('phone'),
                    'message' => 'Not in database',
                    'accept'  => 'Ok!',
                    'type'    => 'Error',

                ]
            ]);
        }
    }

AJAX-FORM:

<ajax-form class="form" method="POST" action="{{ route('auth.sendSmsToken') }}" :clear=true>
    {{ csrf_field() }}
    <form-input :rules="[{required: true}]" 
                id="phone"
                type="text"
                name="phone"
                placeholder="">
    </form-input>
    <div class="card-footer text-center">
        <button type="submit"
                class="btn btn-primary btn-round btn-lg">
            @lang('app.send')
            <i class="fa fa-sign-in"></i>
        </button>
    </div>
</ajax-form>

Debugbar Exceptions:

The given data was invalid.
/Illuminate/Validation/Validator.php#306
Illuminate\Validation\ValidationException
    public function validate()
    {
        if ($this->fails()) {
            throw new ValidationException($this);
        }
    }
ferdinandfrank commented 6 years ago

If I get you right, an error alert is not shown when you input an invalid phone number?

I'm not sure how the Laravel-Phone package handles the validation errors, but the Ajax-Form component should automatically retrieve the errors array from the server response and display the first validation error of the array. But this only happens when an error status code is specified (422 for validation errors). So if no alert will be shown at all, I guess there is no error status code in the server's response...

Could you open the browser's console and paste the server's response including the status code here?

pieinn commented 6 years ago

Hi, Sorry for late reply.

The status code is 422

1