NetteForms a Naja mi nevaliduje formulář po odeslání

Nope, stále žádný alert message. Nepotřebuji něco nastavit i přímo pro ten formulář, abych mu řekl, že tenhle se má validovat přes Nette?

Kalfi napsal(a):

Ukaž ten form a zkontroluj, zda se Ti naja i nette-form načítají

Ahoj,

podíval jsem se do konzole a mám tam tuhle chybu, když to použiju přes tu Naja…

Uncaught SyntaxError: import declarations may only appear at top level of a module

		<!-- Nette -->
		<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script>
		<script src="https://unpkg.com/nette-forms@3"></script>

		<script>
			$(document).ready(function () {

				naja.initialize();
				import netteForms from 'nette-forms';
								naja.formsHandler.netteForms = netteForms;

			});
		</script>

Co přesně z toho formuláře chceš ukázat?

<form action="..." method="post" class="needs-validation form-horizontal" id="frm-addReservationForm" novalidate="novalidate">
	<div>
		<div class="form-group my-3 required">
			<label for="frm-addReservationForm-name" class="required">Jméno a Příjmení:</label>
			<input type="text" name="name" class="form-control text" id="frm-addReservationForm-name" required data-nette-rules='[{"op":":filled","msg":"Zadejte prosím vaše celé jméno."}]'>
		</div>

...

		<div class="form-group my-3">
			<input type="submit" name="send" class="w-100 btn btn-primary button" value="Dokončit rezervaci">
		</div>
	</div>
</form>

Tak tím jsme se posunuli akorát jiné chybě :)

Uncaught TypeError: The specifier “nette-forms” was a bare specifier, but was not remapped to anything. Relative module specifiers must start with “./”, “../” or “/”.

Když to upravím, aby za tím ‘from’ byla cesta k souboru co mám uložený na localhostu, tak to zas napíše jinou chybu :)

Uncaught SyntaxError: The requested module 'http://localhost/www.escapekv.cz/www/netteForms.min.js' doesn't provide an export named: 'default'

		<!-- Nette -->
		<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script>

		<script type="module">
			import netteForms from '/www.escapekv.cz/www/netteForms.min.js';

			$(document).ready(function () {
				netteForms.initOnLoad();
			});
		</script>

PS: A to se jen snažím jít přesně dle dokumentace na webu https://doc.nette.org/…s/validation#…

chemikus napsal(a):

		<!-- Nette -->
		<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script>
		<script src="https://unpkg.com/nette-forms@3"></script>

		<script>
			$(document).ready(function () {

				naja.initialize();
				import netteForms from 'nette-forms';
								naja.formsHandler.netteForms = netteForms;

			});
		</script>

Tebe to vyhadzuje chybu, lebo kombinuješ ES modul s normálnym kódom. Kebyže vyhodíš tieto riadky, tak ti to bude fungovať (tak ako píše aj @jeremy).

import netteForms from 'nette-forms';
naja.formsHandler.netteForms = netteForms;

Aj v samotnej naja dokumentácií je uvedené toto:

By default, the nette-forms object is expected to reside in the global namespace: window.Nette. If you use ES modules and import nette-forms into a different variable, you should configure the correct reference manually:

Tým, že odkazuješ priamo na skript <script src="https://unpkg.com/nette-forms@3"></script>, tak máš dostupný globalný objekt Nette, ktorý Naja automaticky použije na validáciu pred submitom. Tá ďalšia veta + kód importu ES modulu nette-forms sa ťa netýka.

Editoval mskocik (14. 2. 10:52)

<form ... class="ajax needs-validation form-horizontal" ...>

Zkus pridat tridu ajax tomu formulari.

Naja slouzi pro odesilani dat pres ajax, kdyz to nechces pres ajax tak to nema moc smysl Naja instalovat.

Co se tyce nette forms validace bez ajaxu, nevim presne proc to nefunguje. Zkus dat pryc ten novalidate atribut z toho formulare.

@chemikus

Haha… good! Když je tam AJAX tak to funguje … ale co když ho nechci posílat přes Ajax?

Pokud nechceš formulář posílat přes ajax, nedávej do class formuláře třídu „ajax“

Když dám ten novalidate pryč, tak aktivuji validaci podle prohlížeče a ne ten z Nette.

novalidate nastavovuje NetteForms.js dynamicky javascriptem aby zablokoval html 5 validaci formuláře, do html kódu formuláře by se natvrdo atribut novalidate dávat neměl.

Zkus ten javascript vložit do stránky nějakým normálním způsobem, třeba:

<script src="https://unpkg.com/nette-forms@3"></script>

<script src="https://unpkg.com/naja@2/dist/Naja.min.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => naja.initialize())
</script>

knihovna Naja umí spolupracovat s NetteForms.js validací automaticky, myslím, že kvůli tomu není potřeba psát nějaký speciální kód. Knihovnu JQuery vyhoď, je to stará neperspektivní technologie.

Editoval m.brecher (19. 2. 22:21)