Attributo "required" in Safari non funziona

Attributo "required" in Safari non funziona [SOLUZIONE]

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!

seo plugin e-max.it

Graficatelli fiorella locatelli web designer

Autore: Fiorella Locatelli

Digital Marketing e Social Media manager, si occupa di SEO e online brand communication.
Visita i canali social: Facebook, Twitter o LinkedIn.


Graficatelli © 2018 - Blog di Web design. CF: LCTFLL89H47A246A

Tel: (+39) 340 80 59 892 - Email: info@graficatelli.it

sitemap | privacy | cookies

Per offrirti un'esperienza di navigazione ottimizzata e in linea con le tue preferenze questo sito utilizza cookies, anche di terze parti. Chiudendo questo banner, acconsenti al loro impiego.