Attivazione della convalida del modulo HTML5

Ho un modulo con diversi set di campi. Ho qualche Javascript che visualizza i set di campi per gli utenti uno alla volta. Per i browser che supportano la convalida HTML5, mi piacerebbe farne uso. Tuttavia, ho bisogno di farlo alle mie condizioni. Sto usando JQuery.

Quando un utente fa clic su un collegamento JS per passare al fieldset successivo, ho bisogno che la convalida si verifichi sul fieldset corrente e impedisca all’utente di andare avanti in caso di problemi.

Idealmente, poiché l’utente perde l’attenzione su un elemento, si verificherà la convalida.

Attualmente sono in corso le novalidazioni e utilizzano Javascript. Preferirei usare il metodo nativo. 🙂

Non è ansible triggersre l’interfaccia utente di validazione nativa, ma è ansible trarre facilmente vantaggio dall’API di convalida su elementi di input arbitrari:

$('input').blur(function(event) { event.target.checkValidity(); }).bind('invalid', function(event) { setTimeout(function() { $(event.target).focus();}, 50); }); 

Il primo evento checkValidity su ogni elemento di input non appena perde lo stato checkValidity , se l’elemento invalid è invalid l’evento corrispondente verrà triggersto e intrappolato dal secondo gestore di eventi. Questo riporta l’attenzione sull’elemento, ma potrebbe essere piuttosto fastidioso, presumo che tu abbia una soluzione migliore per la notifica degli errori. Ecco un esempio funzionante del mio codice qui sopra .

In realtà è ansible triggersre la convalida manualmente. (La domanda è davvero vecchia, ma appare su Google, il caso d’uso è ancora valido e non c’è ancora una grande risposta.)

Userò semplicemente JavaScript nella mia risposta per migliorare la riusabilità, non è necessario jQuery.

Assumi il seguente modulo HTML:

 

E prendiamo i nostri elementi dell’interfaccia utente in JavaScript:

 var form = document.querySelector('form') var triggerButton = document.querySelector('button') 

Quindi cosa faremo?

  1. Verifica la validità del modulo chiamando form.checkValidity() . Questo ci dirà se il modulo è valido, ma non mostra l’interfaccia utente di validazione.
  2. Se il modulo non è valido, creiamo un pulsante di invio temporaneo e attiviamo un clic su di esso. Poiché il modulo non è valido, sappiamo che non verrà effettivamente inviato, tuttavia mostrerà suggerimenti di convalida all’utente. Rimuoveremo immediatamente il pulsante di invio temporaneo, quindi non sarà mai visibile all’utente.
  3. Se il modulo è valido, non è necessario interferire e lasciare che l’utente proceda.

Nel codice:

 triggerButton.onclick = function () { // Form is invalid! if (!form.checkValidity()) { // Create the temporary button, click and remove it const tmpSubmit = document.createElement('button') form.appendChild(tmpSubmit) tmpSubmit.click() form.removeChild(tmpSubmit) } else { // Form is valid, let the user proceed or do whatever we need to } } 

Questo codice funzionerà praticamente in qualsiasi browser comune (l’ho testato con successo fino a IE11).

Ecco un esempio di CodePen funzionante.


Suppongo che il problema dell’OP non esista più dopo tanti anni, ma per tutti gli utenti con lo stesso use case (formato a più pagine): assicurati di disabilitare in qualche modo gli elementi nelle parti attualmente nascoste del modulo poiché la convalida dei campi invisibili risulterà in un errore del browser.

In una certa misura, è ansible trigger convalida del modulo HTML5 e mostrare suggerimenti all’utente senza inviare il modulo!

Due pulsanti, uno per la convalida, uno per la presentazione

Impostare un ascoltatore onclick sul pulsante di convalida per impostare un flag globale (ad esempio justValidate ) per indicare che questo clic è destinato a verificare la convalida del modulo.

E imposta un ascoltatore onclick sul pulsante di invio per impostare il flag justValidate su false.

Quindi, nel gestore onsubmit del modulo, si controlla il flag justValidate per decidere il valore restituito e si invoca preventDefault() per interrompere il modulo da inviare. Come sapete, la convalida del modulo HTML5 (e l’hint della GUI per l’utente) è preformata prima dell’evento onsubmit e, anche se il modulo è VALIDO, è ansible interrompere la trasmissione del modulo restituendo false o invocando preventDefault() .

E in HTML5 hai un metodo per verificare la convalida del modulo: form.checkValidity() , quindi puoi sapere se il modulo è valido o meno nel tuo codice.

OK, ecco la demo: http://jsbin.com/buvuku/2/edit

Un po ‘facile aggiungere o rimuovere la convalida HTML5 ai campi.

  $('form').each(function(){ // CLEAR OUT ALL THE HTML5 REQUIRED ATTRS $(this).find('.required').attr('required', false); // ADD THEM BACK TO THE CURRENT FIELDSET // I'M JUST USING A CLASS TO IDENTIFY REQUIRED FIELDS $(this).find('fieldset.current .required').attr('required', true); $(this).submit(function(){ var current = $(this).find('fieldset.current') var next = $(current).next() // MOVE THE CURRENT MARKER $(current).removeClass('current'); $(next).addClass('current'); // ADD THE REQUIRED TAGS TO THE NEXT PART // NO NEED TO REMOVE THE OLD ONES // SINCE THEY SHOULD BE FILLED OUT CORRECTLY $(next).find('.required').attr('required', true); }); }); 

Non sono sicuro che valga la pena di scrivere tutto da zero, visto che questo articolo pubblicato su A List Apart è un ottimo lavoro che lo spiega. MDN ha anche una guida pratica per i moduli HTML5 e la convalida (che copre l’API e anche il relativo CSS).

Mi sembra di trovare il trucco: basta rimuovere il tag “target” del modulo, quindi utilizzare un pulsante di invio per convalidare il modulo e mostrare suggerimenti, verificare se il modulo è valido tramite javascript e quindi postare qualsiasi cosa. Il seguente codice funziona per me:

 

  

Un altro modo per risolvere questo problema:

 $('input').oninvalid(function (event, errorMessage) { event.target.focus(); }); 

Quando esiste un processo di convalida molto complesso (in particolare asincrono), esiste una soluzione semplice:

 
...