validation - type - invio email html5




Disabilita la convalida degli elementi del modulo HTML5 (6)

È possibile installare un'estensione di Chrome semplice e disattivare 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à possibile disabilitare la convalida html5 con un solo clic sull'icona dell'estensione sulla barra degli strumenti

Nelle mie forme, mi piacerebbe 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 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?


Basta usare novalidate nel modulo.

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

Saluti!!!


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.


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


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 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 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 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 sintassi 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)






input