risposta-alla-domanda-sullo-sviluppo-web-bd.com

Disabilita la convalida degli elementi del modulo HTML5

Nelle mie forme, mi piacerebbe utilizzare i nuovi tipi di moduli 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 che fa schifo. Se fallisce la convalida incorporata, non c'è nessun messaggio o indicazione oltre all'elemento che si concentra. 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 che i miglioramenti di Nice utilizzino 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?

399
nickf

Se si desidera disabilitare la convalida lato client per un modulo in HTML5, aggiungere un attributo novalidato 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

712
Jakob S

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');
};
<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 in nessun altro browser.

32
Ben Boyle

Volevo solo aggiungere che l'utilizzo 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.

20
BFTrick

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 immissione 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":

enter image description here

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

enter image description here

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'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.

14
John Kugelman

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 sintassi che non è utile in ogni caso (è meglio controllare 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 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 nel modulo e si consiglia di mantenere la convalida per i campi di posta elettronica, ad esempio.

L'uso di jQuery per disabilitare la convalida è anche una cattiva 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 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 sintassi dell'URL) e uso 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)

13
plancton

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

9
Val Entin

Basta usare novalidate nel modulo.

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

Saluti!!!

5
brainSquezer

Ecco la funzione che uso per impedire a chrome e opera di mostrare la finestra di dialogo di input non valida anche quando si usa 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;
});
0
Tony Brix