Cómo validar elementos de formulario HTML en javascript

categoría Computadoras y software / Programación / Html

La validación es una parte importante del trabajo con formularios HTML. Por desgracia, no todos los navegadores proporciona soporte para las características de validación de HTML5. El ejemplo que encuentres aquí no va a funcionar con Internet Explorer porque Internet Explorer no apoya ninguna de las características de validación HTML5.

Una gran parte de la validación de datos en HTML5 está creando el tipo de formulario. El siguiente código muestra un sencillo formulario con un nombre, número de teléfono, y dos campos de contraseña (un original y una confirmación).

Los dos primeros campos utilizan validación automática suministrada por HTML5. Observe el uso de la necesario atribuir en ambos casos, lo que significa que el usuario debe escribir un valor (no necesariamente un valor correcto).
además, el marcador de posición atributo proporciona una pista en cuanto a lo que el usuario tiene que escribir, que siempre es un buen primer paso en la obtención de información. los longitud máxima atributo evita que los usuarios tratando de escribir demasiado o alguien introducir un guión en lugar del contenido. Asimismo, el patrón atributo busca información específica del usuario.
Los mensajes de error genéricos que HMTL5 ofrece son aceptables, pero casi esclarecedor. Este ejemplo muestra cómo utilizar el x-moz-ErrorMessage atribuir a fin de crear un mensaje de error personalizado. Muchos navegadores no son compatibles con este atributo, por lo que los usuarios todavía pueden ver el mensaje de error genérico, pero hay al menos una posibilidad de que los usuarios verán algo que es un poco más dirigido a proporcionar información útil.
Los dos campos de contraseña no pueden confiar en la validación HTML5 estándar. En este caso, debe utilizar javascript para confirmar que el usuario ha introducido la misma contraseña en ambos campos y que los campos hacen, de hecho, contener una contraseña. Aquí está la ValidatePassword () función utilizado para realizar la validación:
función ValidatePassword (P1, P2) {if (P1.value = P2.value || P1.value == "" || P2.value == ""!) {P2.setCustomValidity ("La contraseña es incorrecta") - } else {P2.setCustomValidity ("") -}}
El ejemplo comprueba que ambos campos de contraseña contienen una entrada y que la entrada es la misma en ambos campos. Por supuesto, su cheque contraseña podría hacer más. El mensaje de error aparece como emergente. Observe cómo cada campo contiene una sugerencia sobre lo que escribir.
imagen0.jpg

   
	 	 
 
 
 
 
 
Artículos Relacionados
 
  

 
 
Sobre el autor
 
  Cómo utilizar los campos de contraseña y campos ocultos en el formulario de html5 Cómo utilizar los campos de contraseña y campos ocultos en el formulario de html5  
LA campo de contraseña es un campo de texto especial en un formulario web que no muestra lo que el usuario escribe. Cada pulsación de tecla se representa en la pantalla por un carácter de marcador de posición, como un asterisco o una bala, por…
  Cómo utilizar los campos de texto en su forma html5 Cómo utilizar los campos de texto en su forma html5  
Usted puede usar una variedad de tipos de campos de entrada en sus formas, tales como texto, clave, radio (botón), caja, oculto, buscar, tel (número de teléfono), url, correo electrónico (dirección), fecha y hora, fecha, meses, semana, hora,…
  5 Html5 trucos de entrada de formulario 5 Html5 trucos de entrada de formulario  
La forma más común de obtener la entrada del usuario para un programa javascript es mediante el uso de elementos de formulario HTML. La última versión de HTML, HTML5, tiene varios nuevos elementos de forma y atributos.Entradas de…
  Nuevos trucos html5 / css3 para la validación Nuevos trucos html5 / css3 para la validación  
HTML5 y CSS3 añaden algunos trucos más para simplificar la validación, y son absolutamente maravilloso. Aunque siempre se puede utilizar javascript y expresiones regulares para validar sus páginas, HTML5 promete una solución mucho más…
  Cómo realizar la validación php Cómo realizar la validación php  
Su objetivo general es asegurarse de que cualquier información recibida por parte del usuario, ya sea a partir de un formulario web, un servicio web, o en otro lugar, se comprueba y desinfectado mediante la validación de PHP.Para aprobar los…
  Cómo usar PHP para crear una forma html5 con elementos complejos Cómo usar PHP para crear una forma html5 con elementos complejos  
Para un ejemplo del uso de PHP para crear formularios HTML5 más complejas, mirar por encima de monty.html. Este programa es un homenaje a una de las mejores películas de todos los tiempos. (Es posible que sólo tenga que alquilar esta película si…
  Cómo agregar javascript de validación a un formulario web Cómo agregar javascript de validación a un formulario web  
Puede agregar validación javascript para un formulario web. Si usted tiene una forma, es necesario conectarse a la forma de enviar evento. Si estás usando jQuery, hacerlo es muy, muy fácil. El proceso básico es para comprobar si hay…
  Cómo filtrar la validación de formularios web Cómo filtrar la validación de formularios web  
Después de que haya marcado sus campos requeridos y ha proporcionado información al usuario, es necesario afinar la validación de su formulario web. Antes de hacerlo, debe hacer una pausa y mirar el código que ha añadido para su validación.los…
  Cómo validar números en los campos del formulario web Cómo validar números en los campos del formulario web  
La validación de los números en un formulario Web puede implicar una expresión regular, si usted está esperando un determinado formato o el número de dígitos, o puede implicar matemáticas si usted está buscando para ciertos valores (o…
  Cómo validar formularios web Cómo validar formularios web  
Validación de formularios es el proceso mediante el cual se examinan los datos de un formulario web para asegurarse de que son los datos correctos y esperados en el formato adecuado. Hay dos tipos generales de validación, del lado del cliente y…
  Atributos de nuevos elementos de formulario en html5 Atributos de nuevos elementos de formulario en html5  
HTML5 introduce nuevos elementos de formulario y le da todos los elementos del formulario unos extras. Como a diseñar y construir páginas web, puede aplicar estos nuevos atributos y capacidades a cualquier elemento de formulario:enfoque…
  Cómo construir una casilla de verificación en el formulario de html5 Cómo construir una casilla de verificación en el formulario de html5  
A veces, desea que los usuarios de la página web para indicar si la información es verdadera o falsa. El HTML5 caja elemento es perfecto para este tipo de entrada debido a que el usuario puede hacer clic para activar o desactivar la opción. Las…
 
 »  »  »  » Cómo validar elementos de formulario HTML en javascript