Naja – validácia formuláru v modale

minimal

Zdravím,

snažíme sa začať používať naja.js. Narazili sme na problém s ktorým si nevieme poradiť.

Máme modal v ktorom sa nachádza formulár a však ak ho v onSuccess[] zvalidujeme a vyhodíme chybu tak sa chyba nezobrazí. Rovnako je nejaký postup ako ten modal zavrieť v prípade úspechu ? Nie som JSkár len kolega sa nevie pohnúť z miesta. Nie som si istý či mu potrebujem posielať ešte nejaké dáta alebo … ? Celý formulár je vo vlastnej továrničke nie v presenteri.

/**
		 * @param Form                        $form
		 * @param CreateAdministratorFormData $values
		 */
		$form->onSuccess[] = function (Form $form, CreateAdministratorFormData $values) use ($onSuccess) {
			$values->password = $this->passwords->hash($values->password);

			try {
				$this->administratorRepository->insert((array)$values);
			} catch (UniqueConstraintViolationException $exception) {
				$form['email']->addError('Pre tento email nie je možné vytvoriť administrátora.');
                return;
			}

			$onSuccess($values);
		};

 <!--begin::Modal body-->
                <div class="modal-body scroll-y mx-5 mx-xl-15 my-7">
                    <!--begin::Form-->
                    <form id="kt_modal_new_card_form" class="form ajax" n:name="createAdministratorForm">

                        <ul class="errors" n:if="$form->hasErrors()">
                            <li n:foreach="$form->errors as $error">{$error}</li>
                        </ul>

                        <!--begin::Input group-->
                        <div class="d-flex mb-7 fv-row row">
                            <div class="col-sm-12">
                                <label class="d-flex align-items-center fs-6 fw-bold form-label mb-2">
                                    <span class="required">{label full_name}</span>
                                    <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Priezvisko používateľa"></i>
                                </label>
                                <!--end::Label-->
                                <input n:name="full_name" type="text" class="form-control form-control-solid">
                            </div>

                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="d-flex flex-column mb-7 fv-row">
                            <!--begin::Label-->
                            <label class=" fs-6 fw-bold form-label mb-2"> <span class="required">{label email}</span>
                                <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Prihlasovací email"></i>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input wrapper-->
                            <div class="position-relative">
                                <!--begin::Input-->
                                <input n:name="email" type="text" class="form-control form-control-solid">
                                <!--end::Input-->
                            </div>
                            <!--end::Input wrapper-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Input group-->
                        <div class="d-flex flex-column mb-7 fv-row">
                            <!--begin::Label-->
                            <label class=" fs-6 fw-bold form-label mb-2"> <span class="required">{label password}</span>
                                <i class="fas fa-exclamation-circle ms-2 fs-7" data-bs-toggle="tooltip" title="Prihlasovacie heslo"></i>
                            </label>
                            <!--end::Label-->
                            <!--begin::Input wrapper-->
                            <div class="position-relative">
                                <!--begin::Input-->
                                <input n:name="password" type="password" class="form-control form-control-solid">
                                <!--end::Input-->
                            </div>
                            <!--end::Input wrapper-->
                        </div>
                        <!--end::Input group-->
                        <!--begin::Actions-->
                        <div class="text-center pt-15">
                            <button type="reset" id="kt_modal_new_card_cancel" class="btn btn-light me-3" data-bs-dismiss="modal">Zrušiť</button>
                            {input submit, 'class'=>'btn btn-primary ajax'}
                        </div>
                        <!--end::Actions-->
                    </form>
                    <!--end::Form-->
                </div>
                <!--end::Modal body-->

emololftw

v js souboru stačí kontrolovat payload (např. @layout.latte):

naja.addEventListener('success', event => {
	if (typeof event.detail.payload.closeModal !== 'undefined') {
		$('.modal').modal('hide');
	}
});

V onSuccess[] metodě je potřeba volat payload s hodnotou např. true

Pokud by jsi měl v budoucnu v presenteru tak:

$this->payload->closeModal = true;

nebo jestli máš vytvořenou továrničku tak tento způsob:

V továrničce:

$form->getPresenter()->payload->closeModal = true;

EDIT: formulář musí mít třídu ajax (aby se jednalo o ajaxový formulář)

Editoval emololftw (7. 12. 2021 13:59)

minimal

emololftw napsal(a):

v js souboru stačí kontrolovat payload (např. @layout.latte):
naja.addEventListener('success', event => {
	if (typeof event.detail.payload.closeModal !== 'undefined') {
		$('.modal').modal('hide');
	}
});
V onSuccess[] metodě je potřeba volat payload s hodnotou např. true

Pokud by jsi měl v budoucnu v presenteru tak:
$this->payload->closeModal = true;
nebo jestli máš vytvořenou továrničku tak tento způsob:

V továrničce:
$form->getPresenter()->payload->closeModal = true;
EDIT: formulář musí mít třídu ajax (aby se jednalo o ajaxový formulář)

Výborne zajtra to kolega otestuje. Ešte by ma zaujímalo ako riešiť to zobrazovanie chýb ? Tým že to riešim v $onSuccess kde vraciam len formuláru error tiež asi nejakým spôsobom potrebujem prekresliť Form Errors v latte. Riešiť to cez snippety alebo ?

emololftw

minimal napsal(a):
emololftw napsal(a):

v js souboru stačí kontrolovat payload (např. @layout.latte):
naja.addEventListener('success', event => {
	if (typeof event.detail.payload.closeModal !== 'undefined') {
		$('.modal').modal('hide');
	}
});
V onSuccess[] metodě je potřeba volat payload s hodnotou např. true

Pokud by jsi měl v budoucnu v presenteru tak:
$this->payload->closeModal = true;
nebo jestli máš vytvořenou továrničku tak tento způsob:

V továrničce:
$form->getPresenter()->payload->closeModal = true;
EDIT: formulář musí mít třídu ajax (aby se jednalo o ajaxový formulář)
Výborne zajtra to kolega otestuje. Ešte by ma zaujímalo ako riešiť to zobrazovanie chýb ? Tým že to riešim v $onSuccess kde vraciam len formuláru error tiež asi nejakým spôsobom potrebujem prekresliť Form Errors v latte. Riešiť to cez snippety alebo ?

Ano, zobrazovat chyby pomocí snippetu je super volba. Překreslujte pouze formulář a nikoliv celý modal (při volání $this->redrawControl() by se zavřel. Obalte snippetem pouze formulář nějak takto:

<div class="modal">
	<div class="title"></div>
	{snippet form}
		{control form}
	{/snippet}
</div>

formulář potom v onError[] metodě překreslíte pomocí $this->redrawControl('form'). Následně můžete validovat formulář, že si vypisujete všechny chyby do listu takto:

<div 	n:inner-foreach="$form->getErrors() as $error"
		n:class="flash_login, alert-danger">
	{$error}
</div>

nebo validujete přímo zasažený prvek, vidím, že používáte bootstrap takže něco takového:

{var $input = $form['interval_start']}
<label n:name=$input class="form-label">{$input->getLabel()->getText()}</label>
<input n:class="$input->getErrors() ? is-invalid, form-control" n:name=$input>
<div class="invalid-feedback" n:ifcontent>
	{inputError $input}
</div>