contributte / live-form-validation

:no_entry: Nice client-side live form validation for Nette Forms.
https://contributte.org/packages/contributte/live-form-validation.html
BSD 3-Clause "New" or "Revised" License
59 stars 24 forks source link

Zamrznutí prohlížeče s verzí 1.4.2 #4

Closed freely111 closed 9 years ago

freely111 commented 9 years ago

U verze 1.4.1 se mi po kliknutí na tlačítko submit u formuláře chybové zprávy vždy vymažou vedle inputů a musím následně kliknout do prázdného inputu a potom kliknout jinam, aby se opět chybová hláška zobrazila, že pole je povinné.

Stáhnul jsem si tedy verzi 1.4.2. Tam chybová zpráva zůstane a nezmizí po kliknutí na tlačítko submit, ovšem u této verze se mi kousne vždy prohlížeč.

Postup:

  1. kliknu do prázdného pole a něco tam napíšu a kliknu pryč
  2. kliknu zpět do pole a vymažu ho a kliknu pryč nebo na jiné pole (následně se zobrazí chybová zpráva)
  3. odešlu formulář a prohlížeč zamrzne

V projektu mám nalinkované ještě knihovny: jquery-1.11.3.min.js nette.ajax-2.0.0

U input pole, když nastavím class=“validate-on-load”, tak se mi prázdné pole po načtení stránky neověří, ani u verze 1.4.1, tak i 1.4.2.

Nejsem si jist, zda něco dělám špatně nebo je to bug. Pokud to není bug, tak se omlouvám.

Robyer commented 9 years ago

Bylo by možné připravit ukázkový kód stránky s formulářem? Asi by mělo stačit pouze HTML + JS. A dělá to ve všech prohlížečích nebo jen v některých?

A "validate-on-load" se nastavuje pro celý formulář (<form class="validate-on-load">).

Robyer commented 9 years ago

Ještě teď přemýšlím, co je ta verze 1.4.2, protože na addons.nette i tady v releases a tags na githubu je uvdedná pouze verze 1.4.1. EDIT: Aha, 1.4.2 je uvedená v kódu v masteru.

freely111 commented 9 years ago

Ahoj, stále to zkouším ohledně toho zamrznutí prohlížeče, něco připravím, ale dělá to v tom cyklu, který mi proběhne asi 200 tisíckrát a zamrzne prohlížeč, tak s tím zkouším něco dělat, ale zatím bez úspěchu.

Jinak bootstrap zatím nepoužívám, mám tak klasický nette formulář manuálně vykreslený:

{snippet mysnip} {form roleForm}

    <!-- Jednoduché vykreslení chyb -->
    <ul class="error" n:if="$form->hasErrors()">
            <li n:foreach="$form->errors as $error">{$error}</li>
    </ul>

    <table>
    <tr class="required">
        <th>{label name /}</th>
        <td>{input name }</td>
    </tr>
    <tr class="required">
        <th>{label parent_id /}</th>
        <td>{input parent_id }</td>
    </tr>
    <tr class="required">
        <th>{label priority /}</th>
        <td>{input priority }</td>
    </tr>
    <tr class="required">
        <th>{label active /}</th>
        <td>{input active }</td>
    </tr>
    </table>

    {input submit}
{/form}

{/snippet}

V JS to dělá zde: LiveForm.getMessageElement.......:

    while (errorEls.length > 0) {
        // Remove only direct children
        var errorParent = errorEls[0].parentNode;
        if (errorParent == parentEl) {
            errorParent.removeChild(errorEls[0]);
        }
    }
freely111 commented 9 years ago

Dodatek: dělá to ve všech prohlížečích. Jde tam o zacyklení v tom cyklu, naházel jsem si tam teď všude logování, tak to zkusím, ale nejsem moc zkušený v JS.

freely111 commented 9 years ago

Tu poslední verzi jsem si stáhnul odtud: https://github.com/Robyer/nette-live-form-validation a po rozbalení je tam napsáno: 1.4.2

Robyer commented 9 years ago

Už přibližně vím, kde je problém, ale abych to mohl opravit, potřeboval bych vidět reálnou stránku, na které bych to mohl otestovat. Stačilo by v prohlížeči asi uložit zobrazenou stránku jako HTML + ten javascript a poslat mi to.

Jinak problém bude v konfiguraci toho skriptu - pošli jak máš nastavené ty hodnoty v LiveForm.options.

freely111 commented 9 years ago

Zkusím to uložit a někam to pověsím, nebo pošlu třeba na email, pokud tady někde je uveden. Do LiveForm.options jsem zatím nezasahoval, jen jsem si tam něco vyzkoušel, ale teď to mám v originálu.

var LiveForm = { options: { // CSS class of control's parent where error/valid class should be added; or "false" to use control directly showMessageClassOnParent: 'form-group',

    // CSS class for an invalid control
    controlErrorClass: 'has-error',

    // CSS class for a valid control
    controlValidClass: 'has-success',

    // CSS class for an error message
    messageErrorClass: 'help-block text-danger',

    // control with this CSS class will have disabled live validation
    disableLiveValidationClass: 'no-live-validation',

    // control with this CSS class will not show valid message
    disableShowValidClass: 'no-show-valid',

    // tag that will hold the error/valid message
    messageTag: 'span',

    // message element id = control id + this postfix
    messageIdPostfix: '_message',

    // show this html before error message itself 
    messageErrorPrefix: '&nbsp;<i class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></i>&nbsp;',

    // show all errors when submitting form; or use "false" to show only first error
    showAllErrors: true,

    // show message when valid
    showValid: false,

    // delay in ms before validating on keyup/keydown; or use "false" to disable it
    wait: false
},

forms: { }

};

Robyer commented 9 years ago

Už jsem to dokázal zreprodukovat. Zkusím opravit.

freely111 commented 9 years ago

Tak už konečně: http://uloz.to/xUySnrxF/app-test-live-form-validation-zip

Stačí v tom formuláři vyplnit pole Role... kliknout jinam, potom se vrátit a smazat to, kliknout jinam, aby se ukázala chybová zpráva a potom odeslat. Moc díky.

Robyer commented 9 years ago

Opraveno! :-)

https://github.com/Robyer/nette-live-form-validation/commit/df852f979024b7a774a3123a152c49f35f3db87e

freely111 commented 9 years ago

Paráda, funguje to :D ... Díky moc, je to pecka a kdybych něco objevil, zase dám vědět :)