Nette Form 2.4 nefunguje validace při ajax

motorcb

Zdravím.

V Nette 2.3 jsem používal tuto validaci:

$form->addText('hours', '')
    ->setType('number')
    ->addRule(Form::RANGE, 'Zadejte počet hodin (%d až %d)', array(0, 99))
    ->setAttribute('class', 'form-control')
    ->setAttribute('placeholder', 'Počet hodin');

Tento formulář se odesílá přes ajax (class=„ajax“) a pokud bylo zadáno něco jiného než 0 až 99 vyskočil alert s upozorněním. Vše bylo OK

Chci migrovat na Nette 2.4 takže jsem upravil prvek takto:

$form->addInteger('hours', '')
    ->setRequired(TRUE)
    ->addRule(Form::RANGE, 'Zadejte počet hodin (%d až %d)', array(0, 99))
    ->setAttribute('class', 'form-control')
    ->setAttribute('placeholder', 'Počet hodin');

Jenže tam vždy projde odeslání formuláře přes ajax – nikdy nedojde k varování o špatně vyplněných údajích ve formuláři.
Pokud vypnu odesílání formuláře přes ajax (odeberu class=„ajax“) tak validace funguje správně přes alert (ale formulář potřebuji odesílat přes ajax).

Nevěděl by někdo co dělám špatně?

Díky

Šaman

Máš aktualizované i JS scripty ve /www?
Edit: A jestli ti jde o zachycení nečíselných hodnot, tak ti vypadlo to setType.

Editoval Šaman (6. 7. 2016 0:06)

GEpic

motorcb napsal(a):

Zdravím.

V Nette 2.3 jsem používal tuto validaci:
$form->addText('hours', '')
    ->setType('number')
    ->addRule(Form::RANGE, 'Zadejte počet hodin (%d až %d)', array(0, 99))
    ->setAttribute('class', 'form-control')
    ->setAttribute('placeholder', 'Počet hodin');
Tento formulář se odesílá přes ajax (class=„ajax“) a pokud bylo zadáno něco jiného než 0 až 99 vyskočil alert s upozorněním. Vše bylo OK

Chci migrovat na Nette 2.4 takže jsem upravil prvek takto:
$form->addInteger('hours', '')
    ->setRequired(TRUE)
    ->addRule(Form::RANGE, 'Zadejte počet hodin (%d až %d)', array(0, 99))
    ->setAttribute('class', 'form-control')
    ->setAttribute('placeholder', 'Počet hodin');
Jenže tam vždy projde odeslání formuláře přes ajax – nikdy nedojde k varování o špatně vyplněných údajích ve formuláři.
Pokud vypnu odesílání formuláře přes ajax (odeberu class=„ajax“) tak validace funguje správně přes alert (ale formulář potřebuji odesílat přes ajax).

Nevěděl by někdo co dělám špatně?

Díky

A formulář se ti zpracuje? Nebo nereaguje vůbec? Protože jestli nereaguje, nezapomeň obalit formulář snippetem a ten invalidovat.

motorcb

@Šaman ano, mám aktualizované. nasimuloval jsem to na sandboxu
@GEpic ano, formulář se odešle bez JS validace

Tak se mi to povedlo lépe analyzovat. Použil jsem čistý sandbox (2.4) kód níže. Problém nastává při použití multiplieru a komponent. A pouze pokud má formálář class=„ajax“. Js kinovnu pro ajax používám od @VojtěchDobeš

@layout.latte

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">

	<title>{ifset title}{include title|stripHtml} | {/ifset}Nette Sandbox</title>

	<link rel="stylesheet" href="{$basePath}/css/style.css">
	<meta name="viewport" content="width=device-width">
	{block head}{/block}
</head>

<body>
	<div n:foreach="$flashes as $flash" n:class="flash, $flash->type">{$flash->message}</div>

	{include content}

	{block scripts}
	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="https://nette.github.io/resources/js/netteForms.min.js"></script>
	<script src="{$basePath}/js/nette.ajax.js"></script>
	<script src="{$basePath}/js/main.js"></script>
	{/block}
</body>
</html>

homepage/default.latte

{block content}
	{control hoursForm-1}
	{control hoursForm-2}
	{control hoursForm-3}
{/block}

HompeagePresenter.php

<?php

namespace App\Presenters;

use Nette;
use App\Model;
use Nette\Application\UI\Multiplier;
use App;
use App\Components;

class HomepagePresenter extends BasePresenter
{
    protected function createComponentHoursForm()
    {
        return new Multiplier(function ($x) {
            return new App\Components\HoursFormControl($x);
        });
    }
}

Komponenta
HoursFormControl.latte

<div>

xxxxxxxxx: {$x}

{control hoursForm}

</div>

HoursFormControl.php

<?php

namespace App\Components;

use App;
use Nette;
use Nette\Application\UI\Form;

class HoursFormControl extends Nette\Application\UI\Control
{

    private $x;

    public function __construct($x)
    {
        $this->x = $x;
    }

    public function render()
    {
        $this->template->setFile( __DIR__ . '/HoursFormControl.latte' );
        $this->template->x = $this->x;
        $this->template->render();
    }

    protected function createComponentHoursForm()
    {
        $form = new Form();

        $form->getElementPrototype()->class( 'ajax' );

        $form->addInteger('hours', '')
            ->setRequired(TRUE)
            ->addRule(Form::RANGE, 'Zadejte počet hodin (%d až %d)', array(0, 99))
            ->setAttribute('class', 'form-control')
            ->setAttribute('placeholder', 'Počet hodin');

        $form->addSubmit( 'create', 'Ulož' );

        $form->onSuccess[] = [$this, 'hoursFormSubmitted'];
        return $form;
    }

    public function hoursFormSubmitted( Form $form )
    {

        $aValues = $form->getValues( TRUE );

        dump($aValues);
        dump($this->presenter->isAjax());
        exit;
    }

}

V tomto příkladu nefunguje JS validace formuláře a formulář se vždy odešle. Když odeberu class=„ajax“ tak validace funguje správně.

Nevěděl by někdo kde je chyba?

David Grudl

Není problém v tom, že nový netteForms.js nepoužívá onsubmit? https://github.com/…8828b47196cd

Nette.ajax.js na nej mozna spoleha https://github.com/…ette.ajax.js#L323

@motorcb praktictejsi bývá to hodit na github

David Grudl

Jinak nejnovější netteForms.js ve 2.3 by měl být plně kompatibilní s formuláři 2.4 a přitom používat starý způsob navěšování handlerů, tak můžete zkusit, jestli to s ním bude fungovat.

motorcb

@David Grudl, díky. V poslední verzi Nette 2.3 validace funguje.
Poslal jsem issue na github: https://github.com/…s/issues/128

Díky za pomoc, problém bude v nette.ajax.js