Deshabilitar la validación de elementos de formulario HTML5

Tuve una lectura de la especificación e hice algunas pruebas en Chrome, y si captura el evento "inválido" y devuelve falso que parece permitir el envío de formularios.

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 el uso del 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 :valid y: invalid.

He descubierto esto porque las pseudo clases valid e invalid son parte de la hoja de estilos de repetición HTML5 que he estado usando. Acabo de eliminar las entradas en el archivo CSS que se relacionaban con las pseudo clases. Si alguien encuentra otra solución por favor hágamelo saber.

En lugar de intentar hacer una ejecución final alrededor de la validación del navegador, podría poner el http:// como texto de marcador de posición. Esto es de la misma página que enlazó:

Texto del marcador de posición

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 y cuando el campo esté vacío y no enfocado. Tan pronto como haga clic en (o tab para) el campo de entrada, el 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 texto de marcador de posición en la barra de ubicación que dice "Buscar marcadores e historial":

Al hacer clic en (o tab para) la barra de ubicación, el texto del marcador de posición desaparece:

Irónicamente, Firefox 3.5 no admite la adición de texto marcador de posición a sus propios formularios web. C'est la vie.

Soporte de marcador de posición

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

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

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

Los navegadores que no soportan el atributo placeholder 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.

La mejor solución es usar una entrada de texto y agregar el atributo inputmode="url" para proporcionar las facilidades 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, ser más permisivo.

Poner el atributo novalidate en el formulario no es la respuesta correcta a la pregunta porque elimina la validación para todos los campos del 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 porque debería funcionar 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 extraño prefijo (el mayor pesar 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 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 pattern="^((?http).)*$" prevenir poner el prefijo, porque creo que es mejor ser más permisivo)

He encontrado una solución para Chrome con CSS este selector siguiente sin pasar por alto el formulario de verificación nativo que puede 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...

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

Simplemente use novalidate en su formulario.

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

Salud!!!

Aquí está la función que uso para evitar que chrome y opera muestren el diálogo de entrada no válido incluso cuando se 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;
});

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

Por defecto todo funcionará como por defecto, pero usted será capaz de desactivar la validación html5 con un solo clic en el icono de extensión en la barra de herramientas