errori validazione html5

[rinosan_76bis]

Ciao a tutti sapete come posso creare una funzione che se il campo non è validato dal validatore del browser di HTML5 lui legga il title piuttosto che una altro attributo tipo data-err e visualizzi quello come errore al posto del messaggio di default?
Grazie
Rino

[Xinod]

questo potrebbe aiutarti
http://stackoverflow.com/questions/5...dation-message

ciao

[Xinod]

comunque occhio ad usare il title: a parte che non e' sematicamente troppo corretto usarlo per specificare un errore, ma chrome automaticamente lo aggiunge al testo dell' errore stesso

[rinosan_76bis]

no in effetti il title non va bene, ma so che posso usare dei attributi personalizzati su HTML5 devo solo capire come leggerli... tu lo sai? cmq grazie della risposta... ora provo a vedere come funziona

[Xinod]

basterebbe

... data-error="use me to describe this error" oninvalid="this.setCustomValidity(this.getAttribute('data-error'))" ...

[rinosan_76bis]

grazie... stavo provando qualcosa di simile ma senza inserirlo nel codice html... diciamo un qualcosa di più generico

[Xinod]

si', era giusto un esempio,
poi lo puoi astrarre come preferisci
e come al solito jquery puo' darti una grossa mano...

ciao

[rinosan_76bis]

già che ne capisci magari riesci a darmi una mano... ci sono piccole cose che un po mi sfuggono in generale.
E qui mi sa che mischiando JQuery al resto sto peggiorando la situazione.
Vorrei avere come risultato il fatto di:

- scorrere tutti gli input, select e textarea
- controllare se l'attributo esiste ed è diverso da stringa vuota
- associare il valore dell'attributo al setCustumValidation

Vedendo i codici che mi avevi postato prima ho scritto questo mio codice, ma qualcosa non va

 $('input,select,textarea').each(function(index) {
     var errore=$(this).attr("data-err");
     if(errore!=undefined){
    $(this).oninvalid=function(e){ 
                                e.target.setCustomValidity("");
                                if (!e.target.validity.valid){
                                    alert(errore);
                             e.target.setCustomValidity(errore);
                            }            
                             }
    $(this).oninput=function(e){ e.target.setCustomValidity(""); }
   }
 }); 

L'alert non visualizza mai nulla... se invece lo sposto subito dopo la lettura dell'attributo ottengo undefined quando non esiste ed il contenuto corretto quando esiste. Ora non capisco se l'if è sbagliato o cosa.

[rinosan_76bis]

Trasformata così sembra andare... ora non so se è il migliore dei modi

 $('input,select,textarea').each(function(index) {
     var errore=$(this).attr("data-err");
     var id=$(this).attr("id");
     var input=document.getElementById(id);
     if(errore!=undefined){
    input.oninvalid=function(e){ 
                                e.target.setCustomValidity("");
                                if (!e.target.validity.valid){
                             e.target.setCustomValidity(errore);
                            }            
                             }
    input.oninput=function(e){ e.target.setCustomValidity(""); }
   }
 }); 

[Xinod]

se vuoi mantenere un approccio jquery puoi migliorarlo parecchio:

i data in jquery sono in $(selettore).data('err')
e puoi implementare questi nuovi eventi cosi'
http://jsfiddle.net/rwaldron/GJeez/

ciao