Jak změnit formu zprávy pro required input u formuláře?

Tomča

Zdravím, mám problém. Vytvořil jsem si klasicky formulář v presenteru a ručně ho vykresluji ve View, ale nevím jak změnit to jak se zobrazí error potom co není uživatelem vyplněn input prvek s required vlastností. Chtěl bych formu zprávy změnit z allertu normálně na text jako je třeba <p></p> .Potřeboval bych poradit děkuji.

funkce v presenteru

protected function createComponentRegisterForm(): Form
    {
        $form = new Form;
        $form->addText('username')->setRequired('Zadejte prosím uživatelské jméno')->setHtmlAttribute("placeholder", "uživatelské jméno");
        $password = $form->addPassword("password")->setRequired(true)->setHtmlAttribute("placeholder", "heslo");
        $checkpassword = $form->addPassword("checkpassword")->setRequired(true)->setHtmlAttribute("placeholder", "opakujte heslo");
        $password->addRule($form::EQUAL, "hesla se neshodují", $checkpassword);
        $form->addSubmit("submit", "registrovat se");
        $form->onSuccess[] = [$this, 'RegistrationDataProcessing'];

        return $form;
    }

View

{block content}
<div class="container">
    <div class="text-center">
        <p class="display-4">Registrace uživatele</p>
        {form registerForm}
            <input type="text" n:name="username" class="form-control row mt-2 col-sm-6 col-md-3 ml-auto mr-auto" placeholder="uživatelské jméno" class=""/>
            <input type="password" n:name="password" class="form-control row mt-2 col-sm-6 col-md-3 ml-auto mr-auto" placeholder="heslo"/>
            <input type="password" n:name="checkpassword" class="form-control row mt-2 col-sm-6 col-md-3 ml-auto mr-auto" placeholder="opakujte heslo"/>
            <input type="submit" n:name="submit" class="btn btn-primary row mt-2 ml-auto mr-auto" placeholder="Registrovat"/>
        {/form }
    </div>
</div>

Editoval Tomča (5. 7. 2021 18:00)

Marek Bartoš

{inputError username} pro chyby inputu

Pro chyby formuláře

<ul n:ifcontent>
	<li n:foreach="$form->getOwnErrors() as $error">{$error}</li>
</ul>

Případně kdybys chtěl vykreslovat všechny chyby na jednom místě místu u inputů (nedoporučuju), tak $form->getErrors()

Btw, i při manuálním renderu (při použití n:name makra) můžeš vyhodit type atribut. Stejně tak jakýkoli jiný html atribut který nastavuje Nette nebo tvůj kód, placeholder máš zbytečně v šabloně i presenteru.

Btw, doplň si autocomplete, https://developer.mozilla.org/…autocomplete

Editoval Marek Bartoš (6. 7. 2021 0:48)

DETAIL

Zkus se podívat to examples v knihovně forms. (live_validation.php)
Budeš si to muset asi trošku upravit (pokud máš boostrap, je problém s class „error“), ale pak ti to vypíše errory pod inputy. Používám to u všech formulářů a je škoda, že to tam není nativně. Nebo, že to není v dokumentaci.

Editoval DETAIL (6. 7. 2021 2:17)

Tomča

Marek Bartoš napsal(a):

{inputError username} pro chyby inputu

Pro chyby formuláře
<ul n:ifcontent>
	<li n:foreach="$form->getOwnErrors() as $error">{$error}</li>
</ul>
Případně kdybys chtěl vykreslovat všechny chyby na jednom místě místu u inputů (nedoporučuju), tak $form->getErrors()

Btw, i při manuálním renderu (při použití n:name makra) můžeš vyhodit type atribut. Stejně tak jakýkoli jiný html atribut který nastavuje Nette nebo tvůj kód, placeholder máš zbytečně v šabloně i presenteru.

Btw, doplň si autocomplete, https://developer.mozilla.org/…autocomplete

Díky za radu, ale bohužel mi to stále vždy vyvolá allert. :(

{block content}
<div class="container">
<p class="display-4 text-center mt-5">Přihlášení uživatele</p>
{form loginForm}
    <input type="text" class="required form-control row mt-2 col-md-3 ml-auto mr-auto" n:name="username"/>
    <p class="text-danger error">{inputError username}</p>
    <input type="password" class="required form-control row mt-2 col-md-3 ml-auto mr-auto" n:name="password"/>
    <p class="text-danger error">{inputError password}</p>
    <div class="errors" n:if="$form->hasErrors()">
        <p n:foreach="$form->errors as $error" class="text-danger">{$error}</p>
    </div>
    <input type="submit" class="btn btn-primary row mt-2" n:name="submit"/>
{/form}
</div>

Editoval Tomča (6. 7. 2021 7:45)

Šaman

Já úplně vypínám JS validaci formulářů a nechávám tedy formulář odeslat a následně se vypíše serverová validace. Jinak jsem se toho alertu nezbavil.

$(function () {
	$.nette.ext('validation').defaults.form = false;
	$.nette.init();
});

Tomča

Šaman napsal(a):

Já úplně vypínám JS validaci formulářů a nechávám tedy formulář odeslat a následně se vypíše serverová validace. Jinak jsem se toho alertu nezbavil.
$(function () {
	$.nette.ext('validation').defaults.form = false;
	$.nette.init();
});

Aha, díky, ale doufám, že to jde i jinak :). Nechce se mi pokaždé formulář odesílat na server a až pak ho validovat.

Kamil Valenta

Šaman napsal(a):

Já úplně vypínám JS validaci formulářů a nechávám tedy formulář odeslat a následně se vypíše serverová validace. Jinak jsem se toho alertu nezbavil.
$(function () {
	$.nette.ext('validation').defaults.form = false;
	$.nette.init();
});

Stačí si přepsat

Nette.showFormErrors = function (form, errors) {
...
}

Já místo alertu vypíšu hlášku přímo pod inputem, dám mu červenou classu a přemístím na něj focus…

Nette.showFormErrors = function (form, errors) {
    var focusElem;

    $('div.js-error-message').remove();

    for (var i = 0; i < errors.length; i++) {
        var elem = errors[i].element,
                message = errors[i].message;

        $(elem).addClass('js-error-element');
        $(elem).parent().append('<div class="js-error-message">' + message + '</div>');

        if (!focusElem && elem.focus) {
            focusElem = elem;
        }

    }

    if (focusElem) {
        focusElem.focus();
    }

};

Šaman

@KamilValenta: Dobré vědět. Jen škoda, že tady to asi zapadne.

Nicméně u mě je ještě druhý důvod pro vypnutí JS validace – spousta formulářů má nějaké složitější validace proti datům v DB apod. JS validace mi pak způsobí to, že nejprve se mi vypíšou „statické“ chyby (které zachytí JS) a když se to opraví, najednou vyskočí jiné, které dokáže zvalidovat jen server. A vzhledem k charakteru aplikací, které píšu, mi občasný request navíc vůbec nevadí, takže JS validace pro mě není moc přínos, ale občas starosti. Ergo – mám ji vypnutou.

Tomča

Kamil Valenta napsal(a):
Šaman napsal(a):

Já úplně vypínám JS validaci formulářů a nechávám tedy formulář odeslat a následně se vypíše serverová validace. Jinak jsem se toho alertu nezbavil.
$(function () {
	$.nette.ext('validation').defaults.form = false;
	$.nette.init();
});
Stačí si přepsat
Nette.showFormErrors = function (form, errors) {
...
}
Já místo alertu vypíšu hlášku přímo pod inputem, dám mu červenou classu a přemístím na něj focus…
Nette.showFormErrors = function (form, errors) {
    var focusElem;

    $('div.js-error-message').remove();

    for (var i = 0; i < errors.length; i++) {
        var elem = errors[i].element,
                message = errors[i].message;

        $(elem).addClass('js-error-element');
        $(elem).parent().append('<div class="js-error-message">' + message + '</div>');

        if (!focusElem && elem.focus) {
            focusElem = elem;
        }

    }

    if (focusElem) {
        focusElem.focus();
    }

};

Děkuju, kde to mám pozměnit? Změnil jsem to v Nette\forms\src\assets\netteForms.js a nic se nezměnilo.

Tomča

Už vím, kde byl problém. Oni se totiž nette forms u mě z nějakého důvodu importovali skrz cdn balíček v @layout

DETAIL

Tomča napsal(a):
Šaman napsal(a):

Já úplně vypínám JS validaci formulářů a nechávám tedy formulář odeslat a následně se vypíše serverová validace. Jinak jsem se toho alertu nezbavil.
$(function () {
	$.nette.ext('validation').defaults.form = false;
	$.nette.init();
});
Aha, díky, ale doufám, že to jde i jinak :). Nechce se mi pokaždé formulář odesílat na server a až pak ho validovat.

Jde to podívej se to těch examplů v knihovně nette/forms, dokonce to David Grudl i jednou ukazoval na přednášce, ale zapomnělo se na to.
Normálně to vypíše error u každého prvku zvlášť, pokud máš nette.form.js. Já totiž používám i modaly a tam validace jenom přes server nejde, leda přes ajax…

Editoval DETAIL (6. 7. 2021 13:03)