form input required su safari con modernizr

[MicheleWT]

Sto notando che la validazione dei form quando si definisce l'attributo required su safari sballa, purtroppo modernizr da un falso positivo facendo sballare il tutto.

Avete notato la stessa cosa? soluzioni?

[fcaldera]

Originariamente inviato da MicheleWT
Sto notando che la validazione dei form quando si definisce l'attributo required su safari sballa, purtroppo modernizr da un falso positivo facendo sballare il tutto.

Avete notato la stessa cosa? soluzioni?

dipende. Cosa significa che "sballa"? Riesci a spiegare un po' meglio il problema, definirne i contorni e darci un esempio di codice o una demo su jsfiddle di cui parlare e da cui partire?

[MicheleWT]

potete vedere l'esempio su jsfiddle a questo indirizzo: http://jsfiddle.net/trustweb/sTSMW/

ho creato un form con actiona se stesso (action="#") con due campi, un input type="email" e un checkbox.

entrambi gli elementi hanno l'attributo required settato (ho provato anche con required="required" ma la cosa non cambia).

includo come risorsa modernizr.js (su un mio server), è una versione custom che contiene anche yepnope.js che è uno script per caricare solo quello le risorse che servono realmente.

in pratica modernizr testa se il browser supporta o meno le seguenti funzionalità html5:

il nuovo tipo di input email
l'attributo required
l'attributo placeholder

in caso di fallimento carica lo script jquery (webforms_home.js) che si preoccupa di disattivare il bottone di submit del form finanto che i campi non sono validi.

Navigando con le ultime versioni di FireFox, Chrome, Opera, modernizr riconosce il supporto html5 e tutto viene gestito dal browser senza caricare js.

per Internet explorer (dalla versione 6 alla 9) modernizr non riconosce il supporto html5 e viene caricato il webforms_home.js che implementa le stesse funzionalità con jquery

il problema è con Safari (5.05) in cui moderniz riconosce il supporto html5 ma in realtà non funziona e il form viene inviato senza validazione.

soluzioni, opinioni?

[fcaldera]

come risposta intuitiva mi verrebbe da consigliarti di inserire un ulteriore condizione su yepnope del tipo

test : Modernizr.inputtypes.email 
        && Modernizr.input.required 
        && Modernizr.input.placeholder
        && navigator.appName.toLowerCase() !== 'safari',

(non ricordo cosa stampa l'appName su Safari)

Altrimenti un workaround che potresti usare (e non so se possa funzionare) è quello di creare uno script solo per safari che cicla sugli input e assegna input[i].required = false; e POI carichi modernizr + yepnope (dipende da come avviene il controllo su modernizr comunque)

[MicheleWT]

a quanto pare ho trovato un bug in modernizr, l'ho sottoposto a Paul Irish e vediamo se risolvono.

navigator.appName.toLowerCase() su safari restituisce "netscape"
però, in modo simile, il sistema può essere questo:

var browser=navigator.userAgent.toLowerCase();
if (browser.indexOf("safari") != -1) browser='safari'

yepnope(
{
test : Modernizr.inputtypes.email && Modernizr.input.required && Modernizr.input.placeholder && browser!='safari',
nope : 'javascript/webforms_home.js'
});

[fcaldera]

Originariamente inviato da MicheleWT
navigator.appName.toLowerCase() su safari restituisce "netscape"
però, in modo simile, il sistema può essere questo:

var browser=navigator.userAgent.toLowerCase();
if (browser.indexOf("safari") != -1) browser='safari'

sì, o test equivalente su una funzionalità presente solo su Safari
es. typeof window.webkitRequestAnimationFrame !== 'function' (da controllare che non sia definita anche su Chrome)


edit: come non detto, l'hanno inclusa su Ch10

[MicheleWT]

per il momento ci accontentiamo, spero aggiornino modernizr,

valeu!