Deshabilitar la validación de elementos de formulario HTML
En mis formularios, me gustaría usar los nuevos tipos de formulario HTML, 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 por mí, excepto que es una mierda. Si no pasa la validación incorporada, no hay ningún mensaje o indicación aparte del elemento que recibe el foco. Lleno previamente los elementos de URL con "http://", por lo que mi propia validación personalizada simplemente 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 usarlo, type="text"pero quiero mejoras agradables usando estos nuevos tipos de ofertas (por ejemplo, cambia automáticamente a una distribución de teclado personalizada en dispositivos móviles):
¿Existe alguna forma de desactivar o personalizar la validación automática?
Si desea deshabilitar la validación del lado del cliente para un formulario en HTML, agregue el novalidateatributo 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
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.
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 pseudoclases :valid y :invalid.
Descubrí esto porque las pseudoclases válidas e inválidas son parte de la hoja de estilo estándar HTML5 que he estado usando. Acabo de eliminar las entradas del archivo CSS relacionadas con las pseudoclases. Si alguien encuentra otra solución, hágamelo saber.
Mar 29 '2011 19:03
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 mantienes type="url" obtienes la validación de sintaxis que no es útil en todos los casos (es mejor comprobar 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 patrón="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 de todos los campos del formulario y es posible que desee mantener la validación de los campos de correo electrónico, por ejemplo.
Usar jQuery para deshabilitar la validación también es una mala solución porque debería funcionar absolutamente sin JavaScript.
En mi caso, puse un elemento de selección con 2 opciones (http:// o https://) antes de la entrada de la 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 quizás 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). Utilizo jQuery y un script del lado del servidor para validar la existencia real del sitio web (no 404) y para eliminar el prefijo HTTP si se inserta (evito usar un patrón como patrón="^((?http).)*$" para evitar poner el prefijo porque creo que es mejor ser más permisivos)
En lugar de intentar finalizar la validación del navegador, puede colocarlo http://como texto de marcador de posición. Esto es de la misma página que vinculaste:
Texto del marcador
La primera mejora que aporta HTML5 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 enfocado. Tan pronto como hace clic (o tabula) en el campo de entrada, el texto del marcador de posición desaparece.
Probablemente hayas visto texto de marcador de posición antes. Por ejemplo, Mozilla Firefox 3.5 ahora incluye un texto de marcador de posición en la barra de direcciones que dice "Buscar marcadores e historial":
Cuando haces clic (o tabulas) en la barra de ubicación, el texto del marcador de posición desaparece:
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+ · · ·A continuación le mostramos cómo 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 soportan 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 mitad de camino.
