Disabilita la convalida degli elementi del modulo HTML5

Nei miei moduli, vorrei utilizzare i nuovi tipi di modulo HTML5, ad esempio <input type="url" />( maggiori informazioni sui tipi qui ).

Il problema è che Chrome vuole essere super utile e convalidare questi elementi per me, tranne per il fatto che fa schifo. Se fallisce la convalida integrata, non c'è nessun messaggio o indicazione oltre all'elemento che ottiene lo stato attivo. Ricompilare gli elementi URL con "http://", quindi la mia convalida personalizzata tratta questi valori come stringhe vuote, tuttavia Chrome lo rifiuta. Se potessi cambiare le sue regole di validazione, anche questo funzionerebbe.

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

Quindi, c'è un modo per disattivare o personalizzare la convalida automatica?

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

<form method="post" action="/foo" novalidate>...</form>

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

Ho letto le specifiche e ho fatto alcuni test su Chrome, e se si rileva 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');
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="url" value="http://" />
  <button type="submit">Submit</button>
</form>

Non l'ho provato su nessun altro browser.

Volevo solo aggiungere che l'uso dell'attributo novalidate nel modulo impedirà al browser di inviare il modulo. Il browser valuta ancora i dati e aggiunge le pseudo-classi: valid e: invalid.

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

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 mantieni type = "url" ottieni la convalida della sintassi che non è utile in tutti i casi (è meglio verificare se restituisce un errore 404 invece della sintassi che è abbastanza permissiva e non è di grande aiuto).

Hai anche la possibilità di sovrascrivere il modello predefinito con l'attributo modello = "https?: //.+" per esempio per essere più permissivo.

Inserire l'attributo novalidate nel modulo non è la risposta giusta alla domanda posta perché rimuove la convalida per tutti i campi nel modulo e potresti voler mantenere la convalida per i campi e-mail, ad esempio.

L'uso di jQuery per disabilitare la validazione è anche una cattiva soluzione perché dovrebbe assolutamente 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 ftp: // o altre cose). In questo modo evito di scrivere questo strano prefisso (il più grande rimpianto di Tim Berners-Lee e forse la principale fonte di errori di sintassi dell'URL) e utilizzo un semplice input di testo con inputmode = "url" con segnaposto (senza HTTP). Uso jQuery e lo script lato server per convalidare la reale esistenza del sito Web (no 404) e per rimuovere il prefisso HTTP se inserito (evito di utilizzare un modello come pattern = "^ ((? Http).) * $" per evitare di mettere il prefisso perché penso che sia meglio essere più permissivi)

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

Segnaposto

Il primo miglioramento apportato da HTML5 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 scheda per) il campo di input, il testo 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 dice "Cerca segnalibri e cronologia":

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

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:

<form>
  <input name="q" placeholder="Search Bookmarks and History">
  <input type="submit" value="Search">
</form>

I browser che non supportano l' placeholderattributo lo ignoreranno semplicemente. Nessun danno nessun inganno. Verifica se il tuo browser supporta il testo segnaposto .

Non sarebbe esattamente lo stesso in quanto non fornirebbe quel "punto di partenza" per l'utente, ma almeno è a metà strada.

Ho trovato una soluzione per Chrome con CSS questo seguente selettore senza bypassare il modulo di verifica nativo che potrebbe 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 ...

Ho trovato la soluzione in questa pagina: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Usa novalidate nel tuo modulo.

<form name="myForm" role="form" novalidate class="form-horizontal" ng-hide="formMain">

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;
});

puoi aggiungere del javascript per sopprimere quelle odiose bolle di validazione e aggiungere i tuoi validatori.

document.addEventListener('invalid', (function(){
    return function(e) {
      //prevent the browser from showing default error bubble / hint
      e.preventDefault();
      // optionally fire off some custom validation handler
      // myValidation();
    };
})(), true);

Se si contrassegna un elemento modulo come required=""allora novalidate=""non aiuta.

Un modo per aggirare la requiredconvalida è disabilitare l'elemento .

Potresti installare una semplice estensione di Chrome e disabilitare la convalida al volo https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

per impostazione predefinita tutto funzionerà come predefinito, ma sarai in grado di disabilitare la convalida html5 con un solo clic sull'icona dell'estensione sulla barra degli strumenti