validation - validacion - Deshabilitar la validación de elementos de formulario HTML5

validar formulario javascript html5

Question

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 super útil y validar estos elementos para mí, excepto que apesta. Si falla la validación incorporada, no hay otro mensaje o indicación que no sea el elemento que se enfoca. Relleno previamente los elementos de 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 buenas mejoras con estos nuevos tipos de ofertas (por ejemplo: cambia automáticamente a una distribución de teclado personalizada en dispositivos móviles):

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

Answer 1

En lugar de intentar ejecutar una ejecución final alrededor de la validación del navegador, puede colocar http:// como texto de marcador de posición. Esto es desde la misma página que has enlazado:

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 has visto el 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":

Cuando hace clic en (o tabula) 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+    ·       ·       ·

Aquí 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 admiten el atributo de placeholder simplemente lo ignorarán. No hay daño, no hay 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.

Answer 2

Encontré una solución para Chrome con CSS en el siguiente selector sin omitir 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 puedes personalizar tu mensaje ...

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

Answer 3

Esta es la función que utilizo para evitar que Chrome y Opera muestren el cuadro de diálogo de entrada no válido incluso cuando utilizo 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;
});

Answer 4

La mejor solución es usar una entrada de texto y agregar el atributo inputmode = "url" para proporcionar los recursos del teclado de la 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 patrón de atributo = "https?: //.+", por ejemplo, para ser más permisivo.

Poner el atributo novalidate en el formulario no es la respuesta correcta a la pregunta 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 sin JavaScript.

En mi caso, coloco un elemento de selección 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 arrepentimiento de Tim Berners-Lee y quizás la fuente principal de los 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 el script del lado del servidor para validar la existencia real del sitio web (no 404) y 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)

Answer 5

Leí la especificación e hice algunas pruebas en Chrome, y si detecta el evento "inválido" y devuelve falso, parece que se permite 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.

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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: válido y: inválido.

Descubrí esto porque las pseudo clases válidas e inválidas son parte de la hoja de estilo de plantilla de HTML5 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 por favor hágamelo saber.

Answer 9

Solo usa novalidate en tu forma.

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

¡¡¡Aclamaciones!!!