Disabilita la convalida degli elementi del modulo HTML5

Nelle mie forms, mi piacerebbe utilizzare i nuovi tipi di modulo HTML5, ad esempio ( maggiori informazioni sui tipi qui ).

Il problema è che Chrome vuole essere super utile e convalidare questi elementi per me, tranne che fa schifo. Se fallisce la convalida integrata, non ci sono messaggi o indicazioni oltre all’elemento che si focalizza. Premento gli elementi dell’URL con "http://" , quindi la mia convalida personalizzata considera questi valori come stringhe vuote, tuttavia Chrome lo rifiuta. Se potessi cambiare le sue regole di validazione, funzionerebbe anche questo.

So che potrei tornare a usare type="text" ma voglio i miglioramenti migliori usando queste nuove offerte di tipi (ad esempio: passa automaticamente a un layout di tastiera personalizzato sui dispositivi mobili):

Quindi, c’è un modo per spegnere o personalizzare la convalida automatica?

    Se si desidera disabilitare la convalida lato client per un modulo in HTML5, aggiungere un attributo novalidato all’elemento modulo. Ex:

     
    ...

    Vedi https://www.w3.org/TR/html5/sec-forms.html#element-attrdef-form-novalidate

    Ho letto la specifica e ho fatto alcuni test in Chrome, e se si cattura l’evento “non valido” e si restituisce false che sembra consentire l’invio del modulo.

    Sto usando jquery, con questo HTML.

     // suppress "invalid" events on URL inputs $('input[type="url"]').bind('invalid', function() { alert('invalid'); return false; }); document.forms[0].onsubmit = function () { alert('form submitted'); }; 
      

    Volevo solo aggiungere che l’uso dell’attributo novalidate nel modulo impedisce solo al browser di inviare il modulo. Il browser valuta ancora i dati e aggiunge le: pseudo classi valide e: non valide.

    L’ho scoperto perché le pseudo-classi valide e non valide fanno parte del foglio di stile HTML5 che sto usando. Ho appena rimosso le voci nel file CSS relative alle pseudo classi. Se qualcuno trova un’altra soluzione per favore fammi sapere.

    Invece di provare a eseguire una fine attorno alla convalida del browser, puoi inserire http:// come testo segnaposto. Questo è dalla stessa pagina che hai collegato:

    Testo segnaposto

    Il primo miglioramento che HTML5 offre ai moduli Web è la possibilità di impostare il testo segnaposto in un campo di input . Il testo segnaposto viene visualizzato all’interno del campo di input purché il campo sia vuoto e non focalizzato. Non appena si fa clic su (o sulla scheda) sul campo di immissione, il testo del segnaposto scompare.

    Probabilmente hai già visto il testo segnaposto. Ad esempio, Mozilla Firefox 3.5 ora include il testo segnaposto nella barra degli indirizzi che legge “Cerca segnalibri e cronologia”:

    inserisci la descrizione dell'immagine qui

    Quando fai clic su (o sulla scheda) sulla barra degli indirizzi, il testo segnaposto scompare:

    inserisci la descrizione dell'immagine qui

    Ironia della sorte, Firefox 3.5 non supporta l’aggiunta di testo segnaposto ai propri moduli web. È la vita.

    Supporto segnaposto

     IE FIREFOX SAFARI CHROME OPERA IPHONE ANDROID · 3.7+ 4.0+ 4.0+ · · · 

    Ecco come puoi includere il testo segnaposto nei tuoi moduli web:

     

    I browser che non supportano l’attributo placeholder semplicemente lo ignorano. Nessun danno nessun fallo. Verifica se il tuo browser supporta il testo segnaposto .

    Non sarebbe esattamente la stessa poiché non fornirebbe quel “punto di partenza” per l’utente, ma è almeno a metà strada.

    La soluzione migliore è utilizzare un input di testo e aggiungere l’attributo inputmode = “url” per fornire le funzionalità della tastiera URL. La specifica HTML5 è stata pensata per questo scopo. Se si mantiene type = “url” si ottiene la convalida della syntax che non è utile in ogni caso (è meglio controllare se restituisce un errore 404 invece della syntax che è abbastanza permissiva e non è di grande aiuto).

    Hai anche la possibilità di sovrascrivere il modello predefinito con lo schema di attributo = “https?: //.+”, ad esempio per essere più permissivo.

    L’inserimento dell’attributo novalidate nel modulo non è la risposta corretta alla domanda posta perché rimuove la convalida per tutti i campi del modulo e, ad esempio, si potrebbe voler mantenere la convalida per i campi di posta elettronica.

    L’uso di jQuery per disabilitare la convalida è anche una ctriggers soluzione, perché dovrebbe funzionare senza JavaScript.

    Nel mio caso, ho inserito un elemento select con 2 opzioni (http: // o https: //) prima dell’input dell’URL perché ho solo bisogno di siti Web (e non di ftp: // o altre cose). In questo modo evito di digitare questo prefisso strano (il più grande rimpianto di Tim Berners-Lee e forse la fonte principale degli errori di syntax dell’URL) e utilizzo un semplice input di testo con inputmode = “url” con segnaposto (senza HTTP). Uso jQuery e script lato server per convalidare la reale esistenza del sito web (no 404) e per rimuovere il prefisso HTTP se inserito (evito di usare un pattern come pattern = “^ ((? Http).) * $” per evitare di inserire il prefisso perché penso che sia meglio essere più permissivi)

    Ho trovato una soluzione per Chrome con CSS questo seguente selettore senza bypassare il modulo di verifica nativo che può essere molto utile.

     form input::-webkit-validation-bubble-message, form select::-webkit-validation-bubble-message, form textarea::-webkit-validation-bubble-message { display:none; } 

    In questo modo, puoi anche personalizzare il tuo messaggio …

    Ottengo la soluzione su questa pagina: http://trac.webkit.org/wiki/Styling%20Form%20Controls

    Basta usare novalidate nel modulo.

     

    Saluti!!!

    Ecco la funzione che uso per impedire a chrome e opera di mostrare la finestra di dialogo di input non valida anche quando si utilizza Novalidate.

     window.submittingForm = false; $('input[novalidate]').bind('invalid', function(e) { if(!window.submittingForm){ window.submittingForm = true; $(e.target.form).submit(); setTimeout(function(){window.submittingForm = false;}, 100); } e.preventDefault(); return false; }); 

    È ansible installare un’estensione di Chrome semplice e distriggersre semplicemente la convalida al volo https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

    per impostazione predefinita tutto funzionerà come predefinito, ma sarà ansible disabilitare la convalida html5 con un solo clic sull’icona dell’estensione sulla barra degli strumenti