reload captcha after captcha validation error - laravel-blade

Question

I have captcha in ajax form.
captcha is reloaded after each successfull POST request this.mathcaptchaLabel = response.data.mathcaptchaLabel;
captcha can be reloaded by click on the button <x-modules.button icon="refresh" style="black-outline" class="px-4" #click.prevent="mathcaptchaReset()" />
But I cannot understand how to make captcha reload in case of captcha validation error.
I tried to play with isErrorCaptcha() inside .catch( (error), but it doesn't work.
For example when there is no error, then errorData object doesn't have mathcaptcha array. So I suppose that error.response.data.errors.mathcaptcha should be undefined.
And when there is captcha error I expect error.response.data.errors.mathcaptcha !== 'undefined' and this.errorStates.mathcaptcha = true.
But in console I see
Uncaught (in promise) ReferenceError: error is not defined
at Proxy.isErrorName
And in AlpineJS devtools errorStates.mathcaptcha is false, though in devtools I see that mathcaptcha array exists in errorData object.
blade view
<form method="POST" action="/modalform" method="POST" #submit.prevent="submitData()">
#csrf
<div class="bg-white">
<div class="modalheader flex place-items-center text-center border-b cursor-pointer text-lg leading-6 font-medium text-gray-900">
<h3 class="p-2 hover:bg-blue-500 hover:text-white"
#click="$dispatch('callback')"
:class="callback ? 'bg-blue-500 text-white' : ''"
>
Перезвоните мне
</h3>
<h3 class="p-2 hover:bg-blue-500 hover:text-white"
#click="$dispatch('zamer')"
:class="zamer ? 'bg-blue-500 text-white' : ''"
>
Записаться на замер
</h3>
<h3 class="p-2 hover:bg-blue-500 hover:text-white"
#click="$dispatch('eskiz')"
:class="eskiz ? 'bg-blue-500 text-white' : ''"
>
Отправить эскиз
</h3>
<div class="p-2 place-self-stretch hover:bg-blue-500 hover:text-white" #click="closeModal()" >
<span class="text-3xl">×</span>
</div>
</div>
<div class="modalbody flex items-center w-full h-full p-5"
x-show="sent"
x-text="message"
x-transition:enter="transition ease-out duration-500"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 "
x-transition:leave-end="opacity-0 "
>
</div>
<div class="modalbody flex items-start flex-wrap p-5"
x-show="!sent"
x-transition:enter="transition ease-out duration-500"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
x-transition:leave="transition ease-in duration-200"
>
<div class="text-left w-full">
<div class="mt-2 grid grid-cols-2 gap-x-4 gap-y-2 mb-2">
<!-- Name -->
<div class="name"
:class="errorData.name ? 'text-red-500' : ''"
>
<x-modules.label for="name" :value="__('auth.user.name')" />
<div class="relative text-gray-400 focus-within:text-gray-800">
<div class="absolute flex border border-transparent left-0 top-0 h-full w-10" >
<x-modules.svg type="user-solid" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5"/>
</div>
<x-modules.input id="name" class="block w-full pl-12" type="text" name="name" :value="old('name')" x-model="formData.name" placeholder="Введите имя" autofocus />
</div>
<span x-text="errorData.name" class="text-red-500 text-xs"> </span>
</div>
<!-- Phone -->
<div class="phone"
:class="errorData.phone ? 'text-red-500' : ''"
>
<x-modules.label for="phone" :value="__('auth.user.phone')" />
<div class="relative text-gray-400 focus-within:text-gray-800">
<div class="absolute flex border border-transparent left-0 top-0 h-full w-10 ">
<x-modules.svg type="phone-ringing-outline" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5"/>
</div>
<x-modules.input id="phone" class="block w-full pl-12" type="text" name="phone" :value="old('phone')" x-model="formData.phone" placeholder="Введите телефон" required autofocus />
</div>
<span x-text="errorData.phone" class="text-red-500 text-xs"> </span>
</div>
<!-- Email Address -->
<div class="email"
x-show="zamer || eskiz"
:class="errorData.email ? 'text-red-500' : ''"
>
<x-modules.label for="email" :value="__('email')" />
<div class="relative text-gray-400 focus-within:text-gray-800">
<div class="absolute flex border border-transparent left-0 top-0 h-full w-10 ">
<x-modules.svg type="envelope-outline" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5"/>
</div>
<x-modules.input id="email" class="block w-full pl-12" type="email" name="email" :value="old('email')" x-model="formData.email" autofocus />
</div>
<span x-text="errorData.email" class="text-red-500 text-xs"> </span>
</div>
<!-- Address -->
<div class="address"
x-show="zamer || eskiz"
:class="errorData.address ? 'text-red-500' : ''"
>
<x-modules.label for="address" :value="__('auth.user.address')" />
<div class="relative text-gray-400 focus-within:text-gray-800">
<div class="absolute flex border border-transparent left-0 top-0 h-full w-10 ">
<x-modules.svg type="facade" class="flex items-center justify-center rounded-l bg-gray-100 h-full w-full px-0.5"/>
</div>
<x-modules.input id="address" class="block w-full pl-12" type="text" name="address" :value="old('address')" x-model="formData.address" autofocus />
</div>
<span x-text="errorData.address" class="text-red-500 text-xs"> </span>
</div>
<!-- Upload field -->
<div class="upload" x-show="eskiz">
<label class="flex items-center justify-evenly p-2 bg-white text-gray-700 rounded-lg shadow-lg border border-gray-300 cursor-pointer hover:bg-blue-500 hover:text-white">
<x-modules.svg type="upload" class="w-8 h-8"/>
<span>Выберите файл</span>
<input type="file" class="hidden" multiple />
</label>
</div>
</div>
<!-- Message -->
<div class="message">
<x-modules.label for="message" :value="__('auth.user.message')" />
<x-modules.textarea rows="2" id="message" class="block w-full" name="message" x-model="formData.message" placeholder="Кратко опишите ваш вопрос"/></textarea>
<span x-text="errorData.message" class="text-red-500 text-xs"> </span>
</div>
{{--
<!-- captcha -->
<div class="mt-4 captcha flex items-center space-x-2">
<div class="w-32 img">{!! captcha_img() !!}</div>
<x-modules.svg type="refresh" class="w-10 h-10 reload cursor-pointer" id="reload"/>
<x-modules.input id="captcha" class="block w-full" type="text" name="captcha" placeholder="Введите результат с картинки" x-model="formData.captcha" required />
</div>
--}}
<!-- mathcaptcha -->
<div class="mathcaptcha" :class="errorData.mathcaptcha ? 'text-red-500' : ''">
<label class="" for="mathcaptcha">Введите результат функции: <span x-text="mathcaptchaLabel" ></span></label>
<div class="flex space-x-4 text-gray-400 focus-within:text-gray-800">
<x-modules.button icon="refresh" style="black-outline" class="px-4" #click.prevent="mathcaptchaReset()" />
{!! app('mathcaptcha')->input(['class' => 'appearance-none rounded-md shadow-sm border-gray-300 placeholder-gray-400 focus:border-sky-500 focus:ring-1 focus:ring-sky-500 focus:outline-none valid:border-green-500 invalid:border-red-500 block w-full', 'id' => 'mathcaptcha', 'type' => 'text', 'name' => 'mathcaptcha', 'x-model' => 'formData.mathcaptcha']) !!}
</div>
<span x-text="errorData.mathcaptcha" class="text-red-500 text-xs"> </span>
</div>
</div>
</div>
<div class="modalfooter bg-gray-50 px-4 py-3 sm:px-6 flex justify-between ">
<x-modules.button text="Отмена" style="black-outline" class="px-4" #click.prevent="closeModal()" />
<x-modules.button x-text="buttonLabel" style="blue-solid" class="px-4" #click.prevent="submitData()" />
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /Modal -->
</div>
<script>
function topbar() {
return {
mailTooltip: false,
instagramTooltip: false,
openModal: false,
callback: true,
zamer: false,
eskiz: false,
mathcaptchaLabel: '{{ app('mathcaptcha')->label() }}',
formData: {
name: '',
phone: '',
email: '',
address: '',
message: '',
mathcaptcha: '',
_token: '{{ csrf_token() }}'
},
message: '',
responseData: [],
errorStates: {
name: false,
phone: false,
email: false,
address: false,
message: false,
mathcaptcha: false
},
errorData: [],
loading: false,
sent: false,
buttonLabel: 'Отправить',
resetFields() {
this.formData.name = '',
this.formData.phone = '',
this.formData.email = '',
this.formData.address = '',
this.formData.message = '',
this.formData.mathcaptcha = ''
},
closeModal() {
this.openModal = false;
this.callback = true;
this.zamer = false;
this.eskiz = false;
},
mathcaptchaReset() {
axios.get('/reload-captcha')
.then( (response) => {
console.log(response);
this.mathcaptchaLabel = response.data.mathcaptchaLabel;
});
},
submitData() {
axios.post('/modalform', this.formData)
.then( (response) => {
this.buttonLabel = 'Отправляем...';
this.loading = true;
console.log(response);
this.resetFields();
this.sent = true;
this.message = 'Сообщение успешно отправлено!';
this.responseData = response.data;
this.mathcaptchaLabel = response.data.mathcaptchaLabel;
})
.then( () => {
this.loading = false;
this.sent = false;
this.closeModal();
this.buttonLabel = 'Отправить';
this.message = '';
})
.catch( (error) => {
console.log(error);
this.message = 'Ooops! Что-то пошло не так!'
this.errorData = error.response.data.errors;
this.isErrorCaptcha();
});
},
isErrorCaptcha() {
if (typeof (error.response.data.errors.mathcaptcha) !== 'undefined') {
this.errorStates.mathcaptcha = true;
this.mathcaptchaReset();
}
},
}
}
</script>
routes/web.php
Route::post('/modalform', 'MainController#modalform')->name('modalform');
Route::get('/reload-captcha','MainController#reloadCaptcha')->name('reloadCaptcha');
app/Http/Controllers/MainController.php
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Mail;
use App\Mail\Modalform;
use App\Http\Requests\ModalformRequest;
class MainController extends Controller
{
public function modalform(ModalformRequest $request) {
Mail::to( config('mail.to.address') )->send(new Modalform());
app('mathcaptcha')->reset();
return response()->json([
'status' => 'success',
'messageHeader' => 'Ваш вопрос отправлен!',
'messageContent' => 'В ближайшее время мы свяжемся с вами.',
'mathcaptchaLabel' => app('mathcaptcha')->label(),
]);
}
public function reloadCaptcha()
{
app('mathcaptcha')->reset();
return response()->json([
'mathcaptchaLabel' => app('mathcaptcha')->label(),
]);
}
}
app/Mail/Modalform.php
use Illuminate\Http\Request;
use App\Http\Requests\ModalformRequest;
use Illuminate\Mail\Mailable;
class Modalform extends Mailable
{
public function build(ModalformRequest $request)
{
$this->from( config('mail.from.address') )
->view('emails.modalform')
->withRequest($request);
}
}
App/Http/Requests/ModalformRequest.php
<?php
use Illuminate\Foundation\Http\FormRequest;
class ModalformRequest extends FormRequest
{
public function rules()
{
return [
'name' => 'bail|required|string|between:2,20',
'phone' => 'bail|required',
'email' => 'bail|email:rfc|nullable',
'address' => 'bail|string|max:100|nullable',
'message' => 'bail|string|max:500|nullable',
'mathcaptcha' => 'required|mathcaptcha',
];
}
}