How to trigger form submit via Javascript? (for google recaptcha)

[eduardoarandah]

I need to execute some javascript code just before sending a form.

Problem is, if I do document.getElementById('quick-register-form').submit(); then wire:submit isn't triggered, instead there's a regular form submit.

How to trigger wire:submit via javascript?

The following code is exactly as google suggests when using Recaptcha V3
https://developers.google.com/recaptcha/docs/v3#automatically_bind_the_challenge_to_a_button

<form wire:submit.prevent="submit" id="quick-register-form">
        <button  
                class="g-recaptcha"
                data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}"
                data-callback="submitFormAfterCaptcha"
                data-action="submit"
                >
                Send Form!
        </button>
        <script charset="utf-8">
          function submitFormAfterCaptcha(token){
            console.log(token);
            document.getElementById('quick-register-form').submit();
          }
        </script>
</form>

[scottzirkel]

@ktross and I figured out a way to do it.

Submit the form for validation, then fire off an event and listen for it in your script tag. This will set the recaptcha field so the rest can happen in a method called updatedRecaptcha. That's a magic method since our field is called recaptcha, so you'll need to rename it to whatever your field is called.

public function submit() {
    $this->validate();
    $this->emit('validation-passed');
}

Livewire.on('validation-passed', event => {
  grecaptcha.ready(function () {
    grecaptcha.execute('YOUR-PUBLIC-KEY', {action: 'contact'})
      .then(function (token) {
        @this.set('recaptcha', token)
      })
  })
})

public function updateRecaptcha($token)
{
    // do more recaptcha things here to validate against Google.
    
    // process the rest of your form...
}

[redbastie]

Heres how I did it using recaptcha v2.

You need to composer require google/recaptcha.

You need to add some values to config/services.php:

'recaptcha' => [
    'site_key' => 'paste your site key here',
    'secret_key' => 'paste your secret key here',
],

My rule:

class ReCaptchaRule implements Rule
{
    public function passes($attribute, $value)
    {
        $recaptcha = new ReCaptcha(config('services.recaptcha.secret_key'));
        $resp = $recaptcha->verify($value, request()->ip());

        return $resp->isSuccess();
    }

    public function message()
    {
        return 'The reCAPTCHA response is invalid.';
    }
}

My component:

class Register extends Component
{
    public $name, $password, $password_confirmation, $recaptcha;

    public function render()
    {
        return view('auth.register');
    }

    public function register()
    {
        $validator = Validator::make(
            [
                'name' => $this->name,
                'password' => $this->password,
                'password_confirmation' => $this->password_confirmation,
                'recaptcha' => $this->recaptcha,
            ],
            [
                'name' => ['required', 'alpha_dash', 'max:25', 'unique:users'],
                'password' => ['required', 'confirmed'],
                'recaptcha' => ['required', new ReCaptchaRule],
            ]
        );

        if ($validator->fails()) {
            $this->setErrorBag($validator->errors());
            $this->emit('resetReCaptcha');

            return null;
        }

        $user = User::query()->create([
            'name' => $this->name,
            'password' => $this->password,
        ]);

        auth()->login($user, true);

        return redirect()->intended(RouteServiceProvider::HOME);
    }
}

My view:

@section('title', 'Register')

<div class="row justify-content-center">
    <div class="col-md-4">
        <form class="card" wire:submit.prevent="register">
            <div class="card-header">
                Register
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Name</label>
                    <input type="text" class="form-control @error('name') is-invalid @enderror" wire:model.defer="name">
                    @error('name')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Password</label>
                    <input type="password" class="form-control @error('password') is-invalid @enderror" wire:model.defer="password">
                    @error('password')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="mb-3">
                    <label class="form-label">Confirm Password</label>
                    <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" wire:model.defer="password_confirmation">
                    @error('password_confirmation')<span class="invalid-feedback">{{ $message }}</span>@enderror
                </div>

                <div class="text-center overflow-hidden mb-3">
                    <div class="g-recaptcha d-inline-block" data-sitekey="{{ config('services.recaptcha.site_key') }}"
                         data-callback="reCaptchaCallback" wire:ignore></div>
                    @error('recaptcha')<span class="invalid-feedback d-block">{{ $message }}</span>@enderror
                </div>

                <button type="submit" class="btn btn-primary w-100">Register</button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>

    <script>
        function reCaptchaCallback(response) {
            @this.set('recaptcha', response);
        }

        Livewire.on('resetReCaptcha', () => {
            grecaptcha.reset();
        });
    </script>
@endpush

Of course, you'll need to change your properties if you want to use email instead of name etc.

Hope this helps someone.

[hosseindid]

Hello, unfortunately, when you enter the wrong password, recaptch does not work in the second step of entering the password, how can this problem be solved?