Jak nelépe zobrazit „hvězdičku“ (add class required) u prvků na Form:FILLED pod addConditionOn

Achse

Ukázky formu:

<?php
    $this->addGoogleAddress('address', "Location Address")
        ->addConditionOn($this['type'], Form::IS_IN, array(...))
            ->addRule(Form::FILLED, "Enter Location address.");
?>

Nejlepší (a dle mého jediný) způsob který jsem dokázal vymyslet je prachsprosté:

<script>
    $(document).on('ready', function(){
        $("select[name='type']").on("change", function() {
            changeAddressRequiredLabelClass();
        });
        changeAddressRequiredLabelClass();
    });

    function changeAddressRequiredLabelClass() {
        if ($("select[name='type']").val() !== "XXXX") {
            $("label[for='frm-formXYZ-address']").addClass('required');
        } else {
           $("label[for='frm-formXYZ-address']").removeClass('required');
        }
    }
</script>

Existuje (napadá vás) nějaké elgantnější a především: snadno znovupoužitelné řešení?

Díky. :)

Editoval Achse (29. 7. 2014 14:15)

castamir

Princip:

label.required:before {
  content: "*";
  color: #ff0000;
  font-weight: bold;
}

Editoval castamir (29. 7. 2014 16:20)

Achse

Já ale neřeším jak zobrazit hvězdičku u required classy, já řeším jak tam tu required classu dostat, když validace je výsledkem vyhodnocení validačních podmínek v JS a ten label vůbec classu required nemá.

akadlec

V tom případě si uprav vykreslení label aby se tam ta class přidala. Já používám jen ruční vykreslování formů takže jsem si jen upravil macro {label /}

Achse

Stále asi není jasné co chci. Já ve chvíli kdy vykresluji formulář nevím, jestli je to či ono required. Protože to required nastane až za určitých okolností (selectbox o řádek výš je vybraný tak a tak). Prostě klasická vazba na addContitionOn. Až JS script který dělá u nette validaci na straně klienta zjistí že podle validačních pravidel (uložneých v těch data-nette-validation atributech) se má tohle vyžadovat a hodí například alert. Jenže já potřebuji aby se podle tehcech pravidel dynamicky zobrazovaly a skrejvaly hvězdičky (= přidávaly se a odebíraly classy required). Řešení v mém prvním příspevku dělá přesně to co chci, jenže je to dřevácký, Musí se to psát ke každýmu formuláři zvlášť – duplikuje to kód, atd.. atd.. bla bla bla.

Takže hledám nějaké komplexní řešení. =)

Editoval Achse (30. 7. 2014 9:22)

petr.pavel

Jestli tomu dobře rozumím, potřebuješ, aby u toho samého labelu třída required nebyla, dokud není splněna podmínka pravidla, a objevila se, jakmile se podmínka splní (a obráceně). To znamená, že potřebuješ, aby se položka (částečně) validovala po každé změně obsahu formuláře, na rozdíl od stávající validace pouze při odesílání.

Takže asi upravit si netteForms.js, aby umožňovalo tyto dva validační režimy – stávající kompletní včetně chyby v alertu, a nově i nějaký částečný – nebo i úplný, ale bez zobrazení chyby. A do Nette.validators doplnit kód pro přidání/odstranění třídy required.

validateControl už dokonce má parametr onlyCheck, který můžeš využít, jen si vyrobíš vlastní/kopii Nette.validateForm.

Achse

To zní cool, když to napíšu zkusím z toho udělat pull request alespoň. :) Dík.

Editoval Achse (30. 7. 2014 13:26)

Casper

@Achse Pokročil jsi s tím nějak?

FJP

Ahoj, řeším teď něco podobného taky.

Ve formuláři mám na výběr z radio listu možnosti A a B.

Když když uživatel zvolí A, zobrazí se povinné inputy pro A a je potřeba zneplatnit required u inputů pro B a zneviditelnit je. A opačně.

Zneplatnění je potřeba, protože by formulář jinak nešlo logicky odeslat.

Řešení zatím nemám, ale jen přemýšlím nahlas:
řešení 1) přidat parametr pole (pokud by těch položek muselo být víc) do setRequired, který určí za jakých podmínek je $value v setRequired TRUE. Pole obsahující názvy položek a jejich hodnoty.

řešení 2) přidat parametr do addRule s názvem položky, na kterou se má pravidlo aplikovat (když nebude vyplněn, defaultně platí pro položku, u které je zapsán)

Ale elegantnější mi přijde první řešení.

Editoval FJP (20. 2. 2015 16:30)