Hai terminato la tua landing page, il tuo sito o la tua app contenente un form in HTML5 ed ora sei nella fase di test cross-browser. Alcuni dei tuoi campi (input) sono obbligatori e quindi hai inserito l'attributo "required". Ti accorgi che in Safari questo attributo non è supportato ed il tuo form esegue il post. Come risolvi questo problema?
I form possono servire a molteplici scopi: per acquistare un prodotto o un servizio, per esprimere il proprio parere sul sito, per iscriversi a community e via dicendo... e alcuni di questi campi sono obbligatori (di solito marcati da un asterisco apice *).
Facciamo l'esempio che il campo obbligatorio in questione sia il campo username.
Aggiungiamo l'attributo "required" al campo username:
es:
<form action="/action_page.php">
Username: <input type="text" name="username" required>
<input type="submit">
</form>
Problema: Safari non supporta l'attributo "required" nei <!DOCTYPE html> ovvero usando l' HTML5.
Risultato: Il form esegue il post e quindi non esegue i controlli del campo obbligatorio.
Soluzione: Possiamo ovviare a questo problema caricando uno script nella pagina.
ATTENZIONE: Per utilizzare lo script "polyfiller.js" è necessario avere già caricato nella pagina jquery.
Puoi scegliere se:
1 - caricare lo script in locale scaricando webshim
- apri la cartella della tua applicazione
- crea una cartella chiamata "js-webshim"
- carica i file di webshim appena scaricati
- inserisci il seguente codice prima della chiusura dell' "head" nel file che contiene il form HTML5:
// non è necessario se già lo caricate in precedenza
<script src="/js/jquery.js"></script>
// carico lo script polifiller inserito nella cartella del mio sito js-webshim/minified
<script src="/js-webshim/polyfiller.js"></script>
// carico i parametri dello script o nell'head o prima della chiusura del tag </body>
<scrip t> (rimuovere lo spazio prima della lettera "t" per eseguire il comando)
webshim.activeLang('en');
webshims.polyfill('forms');
webshims.cfg.no$Switch = true;
</script>
oppure
2 - Utilizzare la versione minified direttamente dal sito cdnjs (https://cdnjs.cloudflare.com/ajax/libs/webshim/1.16.0/dev/polyfiller.js) e quindi:
inserisci il seguente codice prima della chiusura dell' "head" nel file che contiene il form HTML5:
// non è necessario se già lo caricate in precedenza
<script src="/js/jquery.js"></script>
// carico lo script direttamente dal sito cdnjs
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.16.0/dev/polyfiller.js"></script>
// carico i parametri nel file che contiene il form o prima della chiusura dell'head o prima della chiusura del tag </body> (consiglio la seconda opzione per velocizzare il caricamento della pagina stessa)
<scrip t> (rimuovere lo spazio prima della lettera "t" per eseguire il comando)
webshim.activeLang('en');
webshims.polyfill('forms');
webshims.cfg.no$Switch = true;
</script>
Ora puoi testare il form e vedraii che i controlli sui campi obbligatori verranno eseguiti anche in Safari.
Buon lavoro!
