Cómo validar campos de formulario. Validación o verificación de campos del formulario en busca de errores y finalización. Forma más compleja

Al agregar un formulario a un sitio, por ejemplo, un formulario comentario, a menudo es necesario comprobar todos o algunos campos antes de enviar para asegurarse de que estén completos. Teóricamente esto se puede hacer usando PHP, sin embargo usando javascript le permite descargar el script del servidor transfiriendo toda la acción directamente al navegador del usuario.

Supongamos que tenemos un formulario pequeño que consta de dos entradas (texto y contraseña), un área de texto y un botón de envío. Nuestra tarea es verificar que los dos primeros campos de entrada y de texto estén vacíos inmediatamente antes de enviar el formulario. Si no hay campos vacíos, entonces se debe enviar el formulario. Si campos vacios será, entonces deberá rodearlos con un marco rojo, mostrar un mensaje en forma de alerta indicando que debe completar todos los campos y luego desactivar el envío del formulario. Después de que el usuario elimine la alerta, el color del marco del campo debería volver a su estado original. El sitio web de Zheka Nesmelov le ayudará a diseñar bellamente el formulario.

Para que todo funcione como debería, vincularemos el valor devuelto por la función send() al evento de envío del formulario. Esta función devolverá verdadero o falso dependiendo de si todos los campos están completos. Si se devuelve falso, cuando se haga clic en el botón no se enviará el formulario; si es verdadero, se enviará el formulario. Tenga en cuenta que no le damos una identificación a los campos (esto los haría mucho más fáciles de conectar a través del DOM de JavaScript).

Comprobar la finalización de los campos del formulario en JavaScript

Ahora pasemos al código JavaScript. Aquí habrá dos funciones. La primera función send() realiza la verificación real. Por el valor de la variable válida, entenderemos si todos los campos se completaron después de completar la verificación. En elems colocamos todos los elementos de la primera forma (índice = 0) de nuestro documento. En lugar de 0, puede utilizar, por ejemplo, el nombre del formulario como una cadena (si se especifica). A continuación, en el ciclo, revisamos todos los elementos de este formulario, verificando simultáneamente si el actual elemento de área de texto, o ingrese con tipo = texto || contraseña. Si es así, comprueba el valor. de este elemento. Después de todo, el valor contendrá el texto ingresado por el usuario. Si valor = linea vacia, luego asignamos borde del elemento color rojo y establezca la variable válida en falso. Al final, después de pasar por todos los elementos, verificamos que sea válido. Si es falso, mostramos una alerta, desactivamos el envío de formularios y resaltamos en rojo solo aquellos campos que no están completados. De lo contrario, envíe el formulario.

La segunda función en el código JavaScript se ejecutará inmediatamente después de cargar el documento. Cuando pasa el mouse sobre el formulario (el evento onmouseover), el bucle comenzará a recorrer todos sus elementos. Si alguno de los elementos propiedad CSS de borde= "2px rojo sólido", luego se le asigna el valor predeterminado (se elimina el color rojo).

Eso es todo. ¡Todo lo que queda es decorar tu formulario maravillosamente!

Deja un comentario, haz clic en “Me gusta” (“Me gusta”) y “Guardar”, y escribiré algo más interesante para ti :)

Este tutorial describe cómo crear formulario JavaScript, que comprueba que el visitante ha rellenado correctamente los campos antes de enviar los datos al servidor. Primero explicaremos por qué la validación de formularios es una técnica útil y luego crearemos un ejemplo sencillo que explique cómo funciona.

¿Por qué necesito comprobar la cumplimentación del formulario?

La validación de formularios es un proceso en el que los datos del formulario se verifican antes de procesarlos. Por ejemplo, si su formulario tiene un campo en el que el usuario debe ingresar dirección de correo electrónico, es posible que desees comprobar que el campo esté completo antes de seguir procesando el formulario.

Hay dos métodos principales para comprobar la finalización de un formulario: en el lado del servidor (con usando CGI scripts, ASP, etc.) y en el lado del cliente (normalmente se utiliza JavaScript). La validación del lado del servidor es más segura, pero en la mayoría de los casos requiere un código más complejo, mientras que la validación del lado del cliente es más simple y rápida (el navegador no necesita conectarse al servidor para validar el formulario, por lo que el usuario recibe una respuesta inmediata si faltan campos que deben ser completados).

Validación de formularios del lado del cliente. Normalmente se realiza mediante un script JavaScript integrado.

Validación de formularios del lado del servidor. Normalmente se realiza mediante un script CGI o ASP.

EN esta lección construiremos forma sencilla con validación del lado del cliente con usando javascript. Luego podrá adaptarlo a sus necesidades.

Un formulario sencillo con verificación.

Creemos un formulario simple con verificación de llenado usando un script. este formulario tiene un campo de texto "Su nombre" y un botón para enviar datos. Nuestro script verifica que el usuario haya ingresado su nombre antes de enviar los datos al servidor.

Abra el formulario y véalo en acción. Intente hacer clic en el botón "Enviar datos" sin ingresar nada en el campo "Su nombre".

La página contiene una función de JavaScript llamada validar_form(). Comprueba que el formulario está completo. veamos primero la forma.

Forma

La primera parte del formulario es la etiqueta del formulario.

El formulario se llama contact_form. Con su ayuda tendremos acceso al formulario de Funciones de JavaScript cheques.

El formulario utiliza un método posterior para enviar datos a un archivo stub htm, que simplemente muestra un mensaje. De hecho, puedes enviar datos a tu guión CGI, página ASP etc. (por ejemplo para enviar correo).

La etiqueta del formulario también contiene un atributo de envío para llamada de javascript funciones de validación validar_form() cuando se hace clic en el botón Enviar datos. La función devuelve un valor booleano, donde verdadero significa "la verificación fue exitosa" y falso significa "los datos están en espera". De esta forma podemos evitar que se envíen los datos del formulario si el usuario no lo ha rellenado correctamente.

El resto del código del formulario agrega el campo de entrada nombre_contacto y el botón "Enviar datos":

Por favor ingrese su nombre.

Su nombre:

función validar_form()

La función de validación de formularios validar_form() está integrada en sección de cabeza al principio de la página:

La primera línea () le dice al navegador qué hacer a continuación. el codigo esta llegando JavaScript y el comentario HTML (