recaptcha v3 a js validace

Shampoo

Čau,

používám js validaci u kontaktního formuláře netteForms.min.js.
Nedávno se ale zjistilo, že nám někdo pomocí formuláře spamuje a plní se emailová fronta.

Jako řešení tedy chceme využít reCaptcha v3 (funguje na základě score).

Řešení jsem rozchodil tak, že jsem nalinkoval knihovnu:

<script src="https://www.google.com/recaptcha/api.js"></script>

Následně jsem upravil submit tlačítko:

<button class="g-recaptcha" n:name="submit" data-sitekey="reCaptchaSiteKey" data-callback='onSubmit' data-action='submit'>Odeslat</button>

A pak vytvořil JS funkci:

<script n:syntax="off">
	function onSubmit(token) {
     	document.getElementById("contactForm").submit();
   	}
</script>

Dále jsem upravil obsloužení formuláře v presenteru, kde otestuji postem, zda byla ta captcha validní.

Funguje to, ale problém je v JS validaci. Po kliknutí na Odeslat, se refreshne stránka a až pak se objeví validační pravidla (pokud nevyplním např. email). Když vyplním formulář a odešlu, tak znovu proběhne refresh a až pak se zobrazí hláška, že byl formulář odeslán.

Tipuji, že je to tou JS funkcí onSubmit(), která po kliknutí na tlačítko zavolá submit().
Je ale nějaká možnost, kdy v té funkci onSubmit() zavolat tu JS validaci formuláře a v případě, že je vše v pořádku, tak odeslat formulář? Nenašel jsem info o funkcích netteForms.js.

Našel jsem reCAPTCHA for Nette Framework, ale vzhledem k tomu, že mi to funguje až na tu JS validaci s refreshem, tak zjišťuji, jestli bych to mohl vyřešit jinak.

Díky

jiri.pudil

Ahoj, je to vlastnost metody HTMLFormElement.submit(): nevyvolává na formuláři událost submit, na kterou spoléhá netteForms.js.

V moderních prohlížečích (bohužel pochopitelně s výjimkou Safari) lze použít HTMLFormElement.requestSubmit(), která tato omezení nemá.

Anebo si můžeš ručně zavolat Nette.validateForm(form) a zařídit se dál podle výsledku validace.

Shampoo

Supér, díky moc za informace :), vyzkouším.

Shampoo

jiri.pudil napsal(a):

Ahoj, je to vlastnost metody HTMLFormElement.submit(): nevyvolává na formuláři událost submit, na kterou spoléhá netteForms.js.

V moderních prohlížečích (bohužel pochopitelně s výjimkou Safari) lze použít HTMLFormElement.requestSubmit(), která tato omezení nemá.

Anebo si můžeš ručně zavolat Nette.validateForm(form) a zařídit se dál podle výsledku validace.

Tak jsem vyzkoušel tu funkci requestSubmit(). V případě prázdného formuláře sice proběhne již validace ajaxově, ale po vyplnění formuláře se pokusí formulář odeslat a nedojde k poslání dat. Takže mi backend vrátí chybu, že nebylo možné formulář odeslat.

Zkouším tedy funkci Nette.validateForm, ale vrací mi to chybu, že žádná taková funkce neexistuje…
Co dělám špatně?

<script n:syntax="off">

		Nette = {
			noInit: true,
			initForm: function (element) {
				document.querySelector("#" + element.id).innerHTML = element.innerHTML;
			}
		};

		$.nette.init();

		function onSubmit(token) {
			console.log(token);
			$("#contactForm")[0].requestSubmit();
			// Nette.validateForm($("#contactForm")[0]);
		}

		$("#contactForm").on('submit', function(e) {

			if (Nette.validateForm(this)) {
				console.log('valid');
			}
			else {
				e.preventDefault();
				console.log('not valid');
			}

		});

</script>

Editoval Shampoo (28. 1. 2021 12:53)