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>