Questo sito utilizza cookies solo per scopi di autenticazione sul sito e nient'altro. Nessuna informazione personale viene tracciata. Leggi l'informativa sui cookies.
Username: Password: oppure
Javascript - Validazione form con html5
Forum - Javascript - Validazione form con html5

Avatar
Falcone (Normal User)
Newbie


Messaggi: 4
Iscritto: 04/12/2014

Segnala al moderatore
Postato alle 0:29
Venerdì, 05/12/2014
Buonasera a tutti. Ultimamente sto cercando di aggiornarmi sulle novità di html5, in particolare, su quelle relative alla validazione dei form. Sto incontrando diversi problemi nella modifica dei messaggi di errore predefiniti, per capirci, quelli che vengono mostrati a video se non si rispetta il pattern o se magari viene lasciato vuoto un campo definito required.
Sto lavorando su un form di registrazione con alcuni campi (nickname, password, conferma password, email etc etc).
Ci sono alcuni comportamenti che non mi piacciono. Per esempio quando compilo un campo in modo errato, per esempio lasciando vuoto un campo required, cliccando sul submit esce naturalmente il messaggio d'errore. A questo punto però se come messaggio di errore uso quello non predefinito, ossia quello da me modificato, andando a correggere il campo errato ad ogni nuovo carattere inserito ricompare il medesimo messaggio di errore anche se il campo è diventato valido. Sarebbe più gradevole che il messaggio d'errore scompaia nel momento in cui il contenuto value errato venga corretto. Come posso ottenere questo risultato? C'è qualcuno che ha già riscontrato questo problema e può aiutarmi? Vi posto anche il codice javascript.

Codice sorgente - presumibilmente Delphi

  1. function funz_messaggi_errore(evt){
  2.         evt.target;
  3.         var messaggio="";
  4.         evt.target.setCustomValidity("");
  5.         if(evt.target.validity.valueMissing) //valore non inserito
  6.                 messaggio += "Questo campo è a obbligatorio\n";
  7.         if(evt.target.validity.patternMismatch) //espressione regolare non rispettata
  8.                 messaggio += "Alcuni caratteri non sono consentiti\n";
  9.                        
  10.         evt.target.setCustomValidity(messaggio);       
  11. }
  12.  
  13. function funz_validazione(evt){
  14.         var field = evt.target;
  15.            field.setCustomValidity("");
  16.         if (!field.checkValidity()){
  17.                 funz_messaggi_errore(evt);
  18.                 return;
  19.         }
  20. }
  21.  
  22. valueNickname.addEventListener("invalid", funz_messaggi_errore, false);
  23. valueNickname.addEventListener("blur", funz_validazione, false);


PM Quote
Avatar
pierotofy (Admin)
Guru^2


Messaggi: 6230
Iscritto: 04/12/2003

Segnala al moderatore
Postato alle 18:33
Sabato, 06/12/2014
Le regole di validazione di HTML5 sono limitate (soprattutto in termini di UI).

Usa http://rickharrison.github.io/validate.js/


Il mio blog: https://piero.dev
PM Quote
Avatar
Falcone (Normal User)
Newbie


Messaggi: 4
Iscritto: 04/12/2014

Segnala al moderatore
Postato alle 18:39
Lunedì, 08/12/2014
Ok grazie ora gli do uno sguardo e in caso mi faccio risentire

PM Quote