PDA

Visualizza la versione completa : Riprodurre l'effetto 'required'


aasmdaa
18-06-2011, 20:53
Sto creando una parte di un progetto con dei form sfruttando interamente l'html5. Dato che fa parte di una intranet verrà utilizzato solo FF4 per cui so che i tag che utilizzo sono già supportati.

In particolare vorrei sapere se c'è la possibilità di ricreare/attivare l'effetto dell'attributo required (molto comodo!). Infatti ci sono alcuni campi su cui effettuo dei controlli (in ajax) lato server (ad esempio per verificare se un nome utente è già utilizzato) ed in caso affermativo vorrei 'attivare' l'errore sul client.
L'attivazione sicuramente la faccio con js ma esiste un attributo attivabile sul campo input oppure mi devo creare il classico css con l'errore ed assegnarlo al campo? In questo caso esiste un css per ricreare lo stesso stile dell'errore del required?

grazie

pr0v4
20-06-2011, 13:39
Come spiegato ampliamente in questo articolo (http://blog.oldworld.fr/index.php?post/2010/11/17/HTML5-Forms-Validation-in-Firefox-4) è possibile sia aggiungere un semplicissimo attributo required all'interno degli elementi che saranno richiesti, che personalizzare graficamente l'elemento obbligatorio utilizzando la pseudo-classe :required.

Purtroppo, in FF4, non è ancora possibile personalizzare la grafica del messaggio di errore, ma ti suggerisco di controllare anche i pattern, che ti aiutano ad inserire espressioni regolari in grado di controllare che il campo contenga del contenuto valido.

Se hai bisogno di maggiori chiarimenti chiedi pure!

aasmdaa
20-06-2011, 22:16
sì avevo già chiaro required e pattern ma non conoscevo la chiamata setCustomValidity() che è quella che mi serviva per invalidare il campo.

ho fatto una prova velocissima ora ma così funziona:



<input type="text" id="testo" value="" onfocus="setCustomValidity('errore')" />


mentre così non funziona (con jQuery):



$(document).ready(function() {
$( "#testo" ).setCustomValidity('errore');
});


Forse devo richiamare la funzione in altro modo?

aasmdaa
20-06-2011, 22:26
Utilizzando jQuery mi restituisce l'errore 'is not a function', mentre così funziona:



document.getElementById('testo').setCustomValidity ('errore');


Qualcuno sa spiegarmi il motivo?

Loading