Deshabilitar la validación de elementos de formulario HTML5

418

En mis formularios, me gustaría usar los nuevos tipos de formularios HTML5, por ejemplo <input type="url" />( más información sobre los tipos aquí ).

El problema es que Chrome quiere ser muy útil y validar estos elementos para mí, excepto que es una mierda. Si falla la validación incorporada, no hay ningún mensaje o indicación que no sea el elemento que se enfoca. Prefiero los elementos URL con "http://", por lo que mi propia validación personalizada solo trata esos valores como cadenas vacías, sin embargo, Chrome lo rechaza. Si pudiera cambiar sus reglas de validación, eso también funcionaría.

Sé que podría volver a usar, type="text"pero quiero las mejoras agradables con estos nuevos tipos de ofertas (por ejemplo: cambia automáticamente a un diseño de teclado personalizado en dispositivos móviles):

Entonces, ¿hay alguna manera de desactivar o personalizar la validación automática?

nickf
fuente
8
El borrador de la especificación HTML 5.1 menciona un inputmodeatributo que, si entiendo lo que leo correctamente, se puede usar para especificar qué tipo de teclado se debe ofrecer al usuario cuando interactúa con el campo, sin implicar ninguna regla de validación. En algún momento en el futuro, usar el inputmodeatributo en lugar del typeatributo probablemente será la solución correcta a este problema, pero aún no.
Mark Amery
@MarkAmery Aunque no sería demasiado difícil obtener el futuro ahora:$('[inputmode]').each(function () { this.attr({type: this.attr('inputmode'), novalidate: true}) });
Marnen Laibow-Koser
1
@ MarnenLaibow-Koser Si bien lo que ha descrito funciona si todo lo que quiere hacer es desactivar la validación (como lo especifica el autor de la pregunta), no logra el mismo resultado que lo inputmodeharía. Al hacer las cosas a su manera, aún no puede (por ejemplo) leer valores no numéricos que el usuario escribe en un cuadro de entrada de tipo number. Por ejemplo, intente escribir algo no numérico en el cuadro de texto en este violín y haga clic en el botón.
Mark Amery
@MarkAmery Interesante. ¿Es eso porque <input type='number'>no acepta valores no numéricos en absoluto?
Marnen Laibow-Koser
@ MarnenLaibow-Koser, supongo que sí. La respuesta aceptada en esta pregunta sobre el problema incluye un enlace para especificar que las respuestas del demandante exigen este comportamiento.
Mark Amery

Respuestas:

752

Si desea deshabilitar la validación del lado del cliente para un formulario en HTML5, agregue un atributo novalidate al elemento del formulario. Ex:

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

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

Jakob S
fuente
83
novalidate="novalidate"y también novalidate=""es una sintaxis válida.
bassim
99
@bassim Sintaxis válida pero demasiado detallada: ¿por qué escribir más de lo que necesita?
user1569050
11
@ user1569050 Por ejemplo, en marcos como CakePHP, utilizará el novalidate="novalidate"método cuando establezca novalidate => trueen la $optionsmatriz de FormHelper::create(). Gracias bassim por la información adicional :)
Jelmer
12
@ rybo111 Esta es una validación del lado del cliente, que es buena para reducir el número de solicitudes al servidor. No es excusa para facilitar la validación en el lado del servidor.
Martti
11
@martti Me refería al hecho de que si estoy probando una nueva validación de PHP, puedo deshabilitar rápidamente la validación de JavaScript para ese formulario para evitar tener que completar correctamente el formulario completo. Debería haber escrito "más fácil de probar".
rybo111
31

Leí la especificación e hice algunas pruebas en Chrome, y si detecta el evento "no válido" y devuelve falso, eso parece permitir el envío del formulario.

Estoy usando jquery, con este 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>

No he probado esto en ningún otro navegador.

Ben Boyle
fuente
Excelente, lo probaré mañana y te diré cómo va. Gracias.
nickf
¡Guauu! Me estaba costando mucho ver dónde se había ido mi evento de envío. ¡Gracias Señor!
Gipsy King
2
Firefox está validando el cambio de entrada. Entonces el evento 'inválido' no se dispara. Entonces, no hay solución para mí.
Niels Steenbeek
77
mañana nunca llega :)
Lucky Soni
44
No funciona He convertido el código en un fragmento. Capturar el invalidevento y devolver falso no permite que el formulario se envíe.
Dan Dascalescu
23

Solo quería agregar que usar el atributo novalidate en su formulario solo evitará que el navegador envíe el formulario. El navegador aún evalúa los datos y agrega las pseudo clases válidas y no válidas.

Descubrí esto porque las pseudo clases válidas e inválidas son parte de la hoja de estilo HTML5 repetitiva que he estado usando. Acabo de eliminar las entradas en el archivo CSS que se relacionan con las pseudo clases. Si alguien encuentra otra solución, hágamelo saber.

BFTrick
fuente
¿Cómo se llamaban las entradas?
tm_forthefuture
1
Jaja, ya no sé, lo siento. Esto fue hace 3 años ahora. :(
BFTrick
1
Quieres decir <form action="" method="" class="" id="" novalidate>
:;
15

La mejor solución es utilizar una entrada de texto y agregar el atributo inputmode = "url" para proporcionar las funciones del teclado URL. La especificación HTML5 fue pensada para este propósito. Si mantiene type = "url" obtendrá la validación de sintaxis que no es útil en todos los casos (es mejor verificar si devuelve un error 404 en lugar de la sintaxis que es bastante permisiva y no es de gran ayuda).

También tiene la posibilidad de anular el patrón predeterminado con el atributo pattern = "https?: //.+", por ejemplo, para ser más permisivo.

Poner el atributo novalidate en el formulario no es la respuesta correcta a la pregunta formulada porque elimina la validación para todos los campos en el formulario y es posible que desee mantener la validación para los campos de correo electrónico, por ejemplo.

Usar jQuery para deshabilitar la validación también es una mala solución, ya que debería funcionar absolutamente sin JavaScript.

En mi caso, pongo un elemento select con 2 opciones (http: // o https: //) antes de la entrada de URL porque solo necesito sitios web (y no ftp: // u otras cosas). De esta manera, evito escribir este prefijo extraño (el mayor arrepentimiento de Tim Berners-Lee y tal vez la principal fuente de errores de sintaxis de URL) y uso una entrada de texto simple con inputmode = "url" con marcadores de posición (sin HTTP). Uso jQuery y el script del lado del servidor para validar la existencia real del sitio web (no 404) y para eliminar el prefijo HTTP si está insertado (evito usar un patrón como pattern = "^ ((? Http).) * $" para evitar poner el prefijo porque creo que es mejor ser más permisivo)

plancton
fuente
13

En lugar de intentar hacer una ejecución final en torno a la validación del navegador, puede colocar el http://texto como marcador de posición. Esto es de la misma página que vinculaste:

Texto del marcador

La primera mejora que HTML5 aporta a los formularios web es la capacidad de establecer texto de marcador de posición en un campo de entrada . El texto del marcador de posición se muestra dentro del campo de entrada siempre que el campo esté vacío y no esté enfocado. Tan pronto como haga clic en (o tabule) el campo de entrada, el texto del marcador de posición desaparecerá.

Probablemente hayas visto texto de marcador de posición antes. Por ejemplo, Mozilla Firefox 3.5 ahora incluye texto de marcador de posición en la barra de ubicación que dice "Buscar marcadores e historial":

ingrese la descripción de la imagen aquí

Cuando hace clic en (o tabula) la barra de ubicación, el texto del marcador de posición desaparece:

ingrese la descripción de la imagen aquí

Irónicamente, Firefox 3.5 no admite agregar texto de marcador de posición a sus propios formularios web. Así es la vida.

Soporte de marcador de posición

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

Así es como puede incluir texto de marcador de posición en sus propios formularios web:

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

Los navegadores que no admiten el placeholderatributo simplemente lo ignorarán. Sin daño, sin falta. Vea si su navegador admite texto de marcador de posición .

No sería exactamente lo mismo ya que no proporcionaría ese "punto de partida" para el usuario, pero al menos está a medio camino.

John Kugelman
fuente
55
+1 para el consejo, pero desafortunadamente no será una solución para mí. Todavía no quiero que se realice ninguna validación, principalmente porque la experiencia de usuario es muy pobre.
nickf
10

Encontré una solución para Chrome con CSS en este siguiente selector sin pasar por alto el formulario de verificación nativo que podría ser muy útil.

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

De esta manera, también puede personalizar su mensaje ...

Obtuve la solución en esta página: http://trac.webkit.org/wiki/Styling%20Form%20Controls

Val Entin
fuente
1
Esto no funciona en la última versión de Chrome (29), me pregunto si es por el parpadeo
Blowsie
5

Simplemente use novalidate en su formulario.

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

¡¡¡Salud!!!

brainSquezer
fuente
1
¿Qué hay de deshabilitar la validación para una sola etiqueta de entrada?
Tobias Kolb
0

Aquí está la función que uso para evitar que Chrome y Opera muestren el diálogo de entrada inválido incluso cuando uso 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;
});
Tony Brix
fuente
0

puede agregar algunos javascript para eliminar esas molestas burbujas de validación y agregar sus propios validadores.

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);
Tobias Kolb
fuente
0

Si marca un elemento de formulario como required=""entonces novalidate="", no ayuda.

Una forma de evitar la requiredvalidación es deshabilitar el elemento .

Cweiske
fuente
-5

Puede instalar una extensión simple de Chrome y simplemente deshabilitar la validación sobre la marcha https://chrome.google.com/webstore/detail/html5-form-validation-err/dcpagcgkpeflhhampddilklcnjdjlmlb/related

de forma predeterminada, todo funcionará de manera predeterminada, pero podrá desactivar la validación html5 con un solo clic en el icono de extensión en la barra de herramientas

Andrew Zhilin
fuente
No estoy seguro de por qué a muchas personas no les gusta esta solución, ya que permite probar la validación del servidor para formularios HTML5 sin activar el código HTML real
Andrew Zhilin
3
Creo que no le gusta porque la pregunta se centra en crear un formulario HTML5 y desactivar la validación automática para todos los usuarios. Pedir a todos sus usuarios que A) usen Chrome y B) instalen una extensión antes de usar su sitio no es una solución sostenible.
Kallmanation