PDA

Visualizza la versione completa : form input required su safari con modernizr


MicheleWT
17-05-2011, 10:40
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
17-05-2011, 11:06
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
17-05-2011, 13:07
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
17-05-2011, 15:34
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
17-05-2011, 15:59
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
17-05-2011, 16:04
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
17-05-2011, 16:16
per il momento ci accontentiamo, spero aggiornino modernizr,

valeu! :)

Loading