Ho un'applicazione web che fa uso del HTML5 required attributo frequentemente. Comunque Safari e cioè 8/9 non supportano questo attributo. C'è un plugin jQuery che costringerà il comportamento su browser non compatibili?html5 attributo obbligatorio sui browser non supportati
trovato un (una volta minified) motore molto versatile e leggero che funziona cross-browser tra cui IE8!
È possibile utilizzare h5validate che fa esattamente quello che vi serve.
<script>
$(document).ready(function() {
$('form').h5Validate();
});
</script>
Si potrebbe shim semplicemente ...
if ($("<input />").prop("required") === undefined) {
$(document).on("submit", function(event) {
$(this)
.find("input, select, textarea")
.filter("[required]")
.filter(function() { return this.value; })
.each(function() {
// Handle them.
});
});
}
Il tuo codice contiene effettivamente un bug, dato che '.filter (function() {return this.value;})' non includerà solo i campi vuoti del modulo ma EXCLUDE tutti i campi vuoti del modulo, in modo da finire con tutti i campi sono obbligatori e hanno contenuto, invece di tutti i campi modulo obbligatori che mancano di contenuto. –
@ S.B. Hai ragione. Se questo è contro i tuoi obiettivi, ometti quella linea. – alex
@alex Non si può semplicemente omettere quella linea e quindi risolvere il problema. Gestirà ogni campo "richiesto", anche se non è vuoto. –
ho scritto un semplice plugin per jQuery per questo. Aggiunge solo la validazione lato client a una form usando l'attributo 'required'.
https://github.com/garyv/jQuery-Validation-plugin
Dopo incluso il plug-in, è possibile chiamare il validate() nella funzione pronti documento di jQuery o alla fine del corpo HTML.
<script>
$(document).ready(function(){
$('form').validate();
});
</script>
quando dici 2. Chiama $ ('form'). Validate(); come farlo? semplicemente aggiungi $ ('form'). validate(); ' all'interno della pagina? Ho provato il tuo plugin ma non riesco a farlo funzionare – Baig
Ho aggiornato il commento con un esempio. La mia ipotesi è che stavi cercando di chiamare validate() prima di includere il plug-in o prima dell'elemento
Non funziona in IE8, che senso ha usare questo? IE9 e versioni successive supportano la convalida HTML5. – Piero
questo funziona senza alcun plugin (solo JQuery):
<script>
// fix for IE < 11
if ($("<input />").prop("required") === undefined) {
$(document).on("submit", function(e) {
$(this)
.find("input, select, textarea")
.filter("[required]")
.filter(function() { return this.value == ''; })
.each(function() {
e.preventDefault();
$(this).css({ "border-color":"red" });
alert($(this).prev('label').html() + " is required!");
});
});
}
</script>
come cambieresti questo per controllare ogni volta che si fa clic su invia? Per sbarazzarsi del bordo rosso se il campo è stato riempito. – Ben
che sembrano avere alcuni problemi piuttosto con il loro codice di prova e la documentazione manca di alcune delle caratteristiche di cui abbiamo bisogno come senza spazi o simboli – steve0nz
hai solo bisogno di verificare l'attributo 'richiesto'? Forse sarebbe meglio conoscere più dettagli e costruirne uno di conseguenza. –