HTML5 Forms: attributi Min e Max per input type Date

fda

HTML5 Forms: attributi Min e Max per input type Date

Salve a tutti.
In un form HTML5 ho utilizzato **Date **come campo di input.
Il campo funziona correttamente con diversi browser solo se non uso gli attributi Min e Max.

La riga utilizzata nella pagina html è la seguente:


<form>
...
<input type="date" placeholder="gg/mm/aaaa" name="name" class="required" value="gg/mm/aaaa" title="gg/mm/aaaa" min="2014-04-03" max="2015-12-31" pattern="(0[1-9]|[12][0-9]|3[01])[-\s/.](0[1-9]|1[012])[-\s/.]20\d\d">
...
</form>

Se elimino gli attributi Min e Max non ho problemi con Firefox, Chrome, Explorer, ma se li lascio mi viene segnalato l'errore di validazione con ciascuno dei tre browser.
Ho anche provato a lasciare gli attributi eliminando il pattern, ma non ottengo risultato. E, del resto, il pattern fa il proprio dovere.
Non so perché, quindi, ma non riesco ad usare questi attributi, che invece dovrebbero essere riconosciuti da Chrome, Opera, Safari, Explorer:

w3schools.com/tags/att_input_min.asp

Mi confermate che non è un errore di sintassi?
Pensate possa dipendere dalla validazione in jQuery?
Suggerimenti?

Grazie a tutti.

Francesco

mentelibera

Ciao Francesco,
il tipo date è un po' problematico per qualche browser anche relativamente recenti, comunque noto che ci sono degli attributi inseriti nel tuo tag che non sono conformi.
Ho scritto un piccolo codice che non mi pare presenti grossi problemi:

[HTML]<!DOCTYPE html>
<html>
<head>
<title>Demo attributo type="date"</title>
</head>
<body>
<form action="processatore.php" method="post">
<input type="date" name="name" min="2014-01-01" max="2015-12-31"> (aaaa-mm-gg)<br>
<input name="invia" type="submit">
</form>
</body>
</html>[/HTML]

Ho validato il codice scrivendolo online con validator.w3.org a parte qualche warning tipico del servizio e dello specifico tag.

Fai attenzione al formato delle date che devono rispondere alla specifica RFC 3339 (approfondimento: ietf.org/rfc/rfc3339.txt) quindi del tipo aaaa-mm-gg.

Eventualmente potresti fare un controllo di correttezza semantica della data con JavaScript al submit e/o sul lato server.

Spero che ti sia utile.

fda

Ciao MenteLibera.
Innanzitutto grazie per la risposta.

Seguendo il tuo consiglio, la prima cosa che ho fatto è stato eliminare l'attributo title, che non interferisce con il mio problema ma che non è conforme e neanche aveva un motivo di esistere.

Dopo ho eliminato anche l'attributo value, che nel mio caso non è necessario. Anche questo, tuttavia, non ha avuto conseguenze sulla risoluzione del problema della validazione del campo *Date *in presenza degli attributi Min e Max.

Ho guardato allora al jQuery facendo la cosa più semplice: aggiornare i file. Così ho sostituito il jQuery Validation con l'ultima versione disponibile scaricata da qui - http://jqueryvalidation.org/ - e qualcosa è cambiato.

Al momento con questo campo nel form:


<input type="date" placeholder="gg/mm/aaaa" name="name" class="required" min="2014-04-04" max="2015-12-31" pattern="(0[1-9]|[12][0-9]|3[01])[-\s/.](0[1-9]|1[012])[-\s/.](19|20)\d\d">

non ho problemi con Chrome (per il quale funzionano date picker e pattern), mentre Explorer e Firefox mi danno errore di validazione se non inserisco la data conforme alla specifica RFC 3339, cosa poco friendly poiché il form si rivolge a un pubblico italiano del tutto trasversale, abituato a scrivere: giorno mese anno.

Immagino pertanto che debba verificare/modificare il jquery oppure usare rules di jquery.validate per escludere questo campo dalla validazione jquery, quindi metterci in php un preg_match con la regex da soddisfare.

Cosa ne pensi? Osservazioni e suggerimenti sono graditissimi, anche perché il problema non è del tutto risolto.

Francesco

mentelibera

Ciao Francesco,
ho fatto un po' di ricerche che hanno portato a risultati interessanti.

Documentazione ufficiale del W3C con gli attributi permessi (potrebbe essere utile utilizzare l'attributo required evitando un controllo con JS/PHP): w3.org/TR/html-markup/input.date.html
Da alcuni commenti su altri forum pare che solo Chrome sia in grado di adattarsi in base ai settaggi del formato personalizzato dell'utente.
Con il tipo type="date" non c'è più bisogno di validare la data essendo fatto automaticamente dall'API di HTML5. Purtroppo pare che non si possa modificare il formato aaaa-mm-gg.

Per ovviare al vincolo del formato di type="date" potrebbe essere utile ripiegare su type="text". Poi a mio avviso la validazione del formato data di type="text" conviene farlo attraverso una funzione JavaScript o se preferisci jQuery.

Il pattern che hai scritto presenta alcuni spunti interessanti ma c'è un piccolo errore nelle classi in corrispondenza dei separatori perché manca un escape, nel dettaglio l'errore è questo:

[HTML][-\s/.][/HTML]

sono da sostituire con:

[HTML][-\s/.][/HTML]

Facci sapere. Ciao!

fda

Ciao MenteLibera,
grazie delle osservazioni, approfondisco e più in là vi aggiorno.

Francesco