¿Cómo validar el formulario ajax antes de enviarlo? Validación de los datos introducidos mediante JavaScript, envío del formulario cumplimentado por correo electrónico

En nuestro ejemplo, tenemos 5 campos que deben completarse:

- Nombre
- mensaje
- correo electrónico
- número de teléfono de contacto
- número de verificación para protección

Además de simplemente comprobar si hay campos vacíos, mostraremos

cómo comprobar si su correo electrónico y número de teléfono están ingresados ​​correctamente

Comprobaremos los campos usando JavaScript. En el último campo debe ingresar un número determinado (para protegerse contra el llenado automático). Si los campos están vacíos, aparecerá una ventana de alerta con una notificación. A este script le agregamos inmediatamente enviar el formulario completo por correo electrónico; esto lo haremos usando php.

Entonces, creemos un archivo. index.php y escribe allí el siguiente formulario:

1. Tu nombre:

2.Mensaje:

3. Correo electrónico

4. Número de contacto

3. Ingrese la cantidad 10+10





Crear un archivo datos.js, escribe el código de verificación en él:
función Formdata(datos)(
/* si el campo Su nombre no está completo, la longitud es menor que 3-x*/
si (datos.fnm! = nulo && datos.fnm.valor.longitud< 3)
{
alert("Rellene el campo "Su nombre"");
devolver falso;)

/* si el campo Mensaje no está completado */
si (datos.texto! = nulo && datos.texto.valor.longitud< 3)
{
alert("Rellene el campo "Mensaje"");
devolver falso;)

/* Correo electrónico del usuario */
if(datos.correo electrónico!= nulo && datos.correo electrónico.valor.longitud == 0)
{
alert("El campo de correo electrónico está vacío");
devolver falso;)

if(datos.correo electrónico! = nulo && datos.correo electrónico.valor.longitud< 6)
{
alert("El correo electrónico es demasiado corto");
devolver falso;)

if(!(/^w+[-_.]*w+@w+-?w+.(2,4)$/.test(data.email.value)))
{
alert("Ingrese la dirección de correo electrónico correcta");
devolver falso;)

/* número de teléfono de contacto */
if(datos.teléfono! = nulo && datos.teléfono.valor.longitud == 0)
{
alert("El campo del número de teléfono de contacto está vacío");
devolver falso;)

if(datos.teléfono! = nulo && datos.teléfono.valor.longitud< 5)
{
alert("El campo "Teléfono de contacto" debe contener al menos cinco caracteres");
devolver falso;)

if(!(/^+z/.test(datos.teléfono.valor+"z")))
{
alert("El número de contacto es incorrecto");
devolver falso;)

/* hacer que el campo de monto sea igual a un número determinado */
numero = document.getElementById("summa");
si (número.valor! == "20")
{
alert("La cantidad no se ingresó o se ingresó incorrectamente");
devolver falso;)
) Cargamos este archivo en nuestro documento, lo colocamos entre las etiquetas principales:

Ahora nuestra prueba está lista. Ahora, después de haber ingresado todos los datos, nos enviamos nuestro formulario por correo electrónico.
Escribimos el código php en el archivo index.php:

Muy a menudo es necesario agregar un formulario a un sitio, porque un formulario es la forma más popular para que un usuario se comunique con un sitio y es muy importante que los datos ingresados ​​por el usuario sean correctos. Y para que el formulario se envíe con los datos correctos hay que comprobarlo antes de hacerlo. Por eso, en este artículo nos ocuparemos de la validación de formularios en JavaScript.

Primero creemos un formulario que luego verificaremos:

Su nombre:



Tu contraseña:



Tu género:




Seleccionar número:

1
2
3



Tu mensaje:



De acuerdo con nuestras reglas:




Subir archivo:

Esta es la forma. Espero que estés familiarizado con HTML y creo que no cuesta nada explicarlo. Si algo no está claro, observe cómo funciona este código en el navegador.

Ahora hablemos de cómo obtener valores de los campos del formulario. Después de todo, antes de comprobarlos, es necesario averiguar qué escribió el usuario allí. La vista general del acceso a un campo de formulario es la siguiente:

Documento.nombre_formulario.nombre_campo.valor;

Es decir, primero accedemos al objeto Documento, luego a su propiedad Formulario (a través del nombre del formulario), luego al nombre del campo de este formulario y, finalmente, al valor del campo. Generemos todos los campos que obedecen a esta vista general:

Formulario var = documento.form1;
documento.escribir(formulario.nombre.valor + "
");
documento.escribir(formulario.contraseña.valor + "
");
documento.escribir(formulario.número.valor + "
");
documento.escribir(formulario.mensaje.valor + "
");
documento.escribir(formulario.reglas.valor + "
");
documento.escribir(formulario.ocultarcampo.valor + "
");
documento.escribir(formulario.cargararchivo.valor + "
");
documento.escribir(formulario.sub.valor + "
");
documento.escribir(formulario.pero.valor + "
");

Todos estos son campos que tienen una propiedad de valor y se puede acceder a ellos de esta manera.

Ahora hablemos de un elemento de forma especial: la radio. Accedamos al valor de la radio:

Var sexo = (document.form1.sex.checked)?
documento.form1.sex.value: documento.form1.sex.value;

Observe que tenemos dos elementos de radio que están en la matriz de sexo. Sus índices son 0 y 1. En este script comprobamos si nuestro primer elemento está incluido ( comprobado), luego asignamos el valor del primer elemento, en caso contrario asignamos el valor del segundo elemento. Por cierto, si alguien no entiende, esto es una construcción del operador de condición IF. Por supuesto, se podría escribir así:

Var sexo;
if (document.form1.sex.checked) sexo = document.form1.sex.value;
else sexo = document.form1.sex.value;

Ahora que tenemos acceso a todos los campos, finalmente validemos el formulario. Pero primero, agreguemos el atributo "onSubmit" a la etiqueta con el valor "return check();". Este atributo hará lo siguiente: antes de enviar el formulario, llame a una función que debería devolver verdadero o falso. Si devuelve verdadero, el formulario se enviará al servidor y, si es falso, no se enviará el formulario.

Ahora creemos una función check(), que debería, en primer lugar, verificar todo el formulario, informar al usuario sobre los errores y también devolver verdadero (si el formulario es completamente correcto) o falso (si el formulario contiene errores).

Verificación de función (formulario) (
var nombre = formulario.nombre.valor;
var pasar = formulario.contraseña.valor;
var mensaje = formulario.mensaje.valor;
var reglas = formulario.reglas.valor;
archivo var = form.fileupload.value;
var malo = "";
si (nombre.longitud< 3)
malo += "El nombre es demasiado corto" + "\n";
si (nombre.longitud > 32)
bad += "El nombre es demasiado largo" + "\n";
si (paso.longitud< 3)
bad += "La contraseña es demasiado corta" + "\n";
si (longitud de paso > 32)
bad += "La contraseña es demasiado larga" + "\n";
si (mensaje.longitud< 3)
malo += "Mensaje demasiado corto" + "\n";
si (reglas! = "activado")
bad += "No estuviste de acuerdo con las reglas" + "\n";
si (archivo.longitud == 0)
bad += "No has seleccionado un archivo para cargar" + "\n";
si (malo! = "") (
bad = "El formulario está completado incorrectamente:" + "\n" + bad;
alerta (mala);
devolver falso;
}
devolver verdadero;
}

En este script, primero obtenemos todos los datos que deben verificarse y los escribimos en variables. Luego creamos una variable bad , en la que escribimos todos los datos incorrectos. Luego hay un conjunto completo de IF que verifican los campos del formulario y escriben cualquier error en la variable incorrecta. Luego, si la variable incorrecta no está vacía (es decir, hubo errores), mostramos una ventana (alerta()) con errores. Y devolvemos false para que no se envíe el formulario. Si la variable incorrecta está vacía, simplemente devolvemos verdadero para que el formulario se envíe para su procesamiento a "handler.php".

Al agregar un formulario a un sitio, por ejemplo, un formulario de comentarios, a menudo es necesario verificar todos o algunos campos antes de enviarlos para asegurarse de que estén completos. En teoría, esto se puede hacer usando PHP, pero usar 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 hay campos vacíos, debe rodearlos con un marco rojo, mostrar un mensaje en forma de alerta que indique que se deben 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 elemento actual es un área de texto o una entrada con tipo = texto || contraseña. Si es así, verificamos el valor de este elemento. Después de todo, el valor contendrá el texto ingresado por el usuario. Si valor = es una cadena vacía, asignamos el color rojo al borde del elemento y configuramos 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 tiene la propiedad CSS border = "2px rojo sólido", 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 :)

La “protección contra tontos” es un conjunto de medidas para evitar la entrada de información incorrecta en un formulario. Por ejemplo, si un campo requiere ingresar un número positivo del 0 al 10, entonces debe verificar que el usuario no ingrese texto o un número que no se encuentre en el rango especificado, es decir, el número no debe ser menor que cero ni mayor que diez.

¿Por qué se ingresa información incorrecta? Esto se hace principalmente por tres razones.

El usuario cometió accidentalmente un error, por ejemplo, sin prestar atención a lo que debía indicar.

La página web pide datos de forma ambigua, dejando al usuario adivinando y adivinando qué es lo que realmente quiere. Sin embargo, las opiniones del desarrollador y del usuario no siempre coinciden.

Hay muchas personas que perciben las instrucciones como un desafío y tratan de hacer lo contrario. Estos usuarios razonan algo como esto: “Sí, me piden que introduzca un número. ¿Qué pasará si indico las letras? Luego preguntan información obviamente incorrecta y ven a qué conduce.

Debe entenderse que una redacción precisa y correcta, aunque reduce la probabilidad de errores, de ninguna manera evita que se produzcan. Sólo los medios técnicos del lado del servidor le permiten obtener el resultado requerido y evitar ingresar información incorrecta. Sin embargo, la revisión o, como también se le llama, validación del lado del cliente le permite verificar rápidamente la exactitud de los datos ingresados ​​​​por el usuario, sin enviar el formulario al servidor. Esto ahorra tiempo al usuario y reduce la carga en el servidor. Desde el punto de vista de la usabilidad, también hay ventajas: el usuario recibe inmediatamente un mensaje sobre la información que proporcionó incorrectamente y puede corregir su error.

Campo requerido

Algunos campos del formulario deben completarse antes de enviarlos al servidor. Esto se aplica, por ejemplo, al formulario de registro, donde deberá introducir un nombre de usuario y una contraseña. Para especificar campos obligatorios, utilice el atributo requerido, como se muestra en el Ejemplo 1.

Ejemplo 1. El atributo requerido

HTML5 IE 10+ Cr Op Sa Fx

Campo requerido

Acceso:

Contraseña:

Los campos obligatorios deben completarse antes de enviar el formulario; de lo contrario, el formulario no se enviará al servidor y el navegador emitirá una advertencia al respecto. El tipo de mensaje depende del navegador; por ejemplo, Chrome muestra información sobre herramientas como se muestra en la Fig. 1.

Arroz. 1. El campo obligatorio no está completado

Corrección de los datos

Inicialmente, hay dos campos en los que la entrada del usuario se verifica automáticamente. Esta es una dirección web y una dirección de correo electrónico. Chrome también verifica la validez del campo del calendario, pero solo porque no tiene una interfaz para hacer clic en el calendario. Las siguientes reglas se aplican a estos elementos.

• La dirección web ( ) debe contener el protocolo (http://, https://, ftp://).
• La dirección de correo electrónico ( ) debe contener letras o números antes del símbolo @, después, luego un punto y un dominio de nivel superior.

Los navegadores tienen políticas ligeramente diferentes para verificar los datos del usuario. Por ejemplo, Opera inserta automáticamente el protocolo http:// delante del texto ingresado, mientras que otros navegadores lo esperan del usuario. Chrome y Opera requieren un punto en la dirección de correo electrónico; Firefox no lo requiere.

El ejemplo 2 muestra un formulario con campos obligatorios en el que el navegador valida dos campos.

Ejemplo 2: Corrección de los datos

HTML5 IE 10+ Cr Op Sa Fx

Corrección de los datos

Complete el formulario (todos los campos son obligatorios)

Nombre:

Correo electrónico:

Sitio web:

Opera sólo comprueba un elemento de formulario si tiene un atributo de nombre.

Lo que sucede en Opera cuando ingresa datos incorrectos se muestra en la Fig. 2.

Arroz. 2. Advertencia sobre datos incorrectos

Plantilla de entrada

Algunos datos no se pueden clasificar en uno de los tipos de elementos del formulario, por lo que debe utilizar un campo de texto para ello. Al mismo tiempo, se ingresan de acuerdo con un estándar determinado. Así, una dirección IP contiene cuatro números separados por un punto (192.168.0.1), el código postal ruso está limitado a seis dígitos (124007), un número de teléfono contiene un código de área y un número específico de dígitos, a menudo separados por un guión. (391 555-341-42), etc. El navegador necesita especificar una plantilla de entrada para que verifique los datos ingresados ​​por el usuario de acuerdo con ella. Para hacer esto, se utiliza el atributo de patrón y su valor es una expresión regular. Algunos valores típicos se enumeran en la tabla. 1.

El ejemplo 3 le pide que ingrese un valor de color hexadecimal (#ffcc00) y si no está en este rango, el navegador muestra un mensaje de error.

Ejemplo 3. Plantilla de entrada

HTML5 IE 10+ Cr Op Sa Fx

Entrada de color

Ingrese el valor de color hexadecimal (debe comenzar con #)

En la figura. La Figura 3 muestra una advertencia en el navegador Chrome.

Arroz. 3. Los datos ingresados ​​no coinciden con la plantilla.

Desvalidación

La validación no siempre es necesaria para un formulario; por ejemplo, un desarrollador querrá utilizar una solución JavaScript universal y ya no necesitará una verificación duplicada por parte del navegador. En tales casos, debe desactivar la validación integrada. Para hacer esto, use el atributo novalidate de la etiqueta. El ejemplo 4 muestra el uso de este atributo.

Ejemplo 4: no validación

HTML5 IE 10+ Cr Op Sa Fx

atributo novalidar

Para un propósito similar se utiliza el atributo formnovalidate, que se agrega al botón para enviar el formulario, en este caso a la etiqueta. En este caso, el formulario del ejemplo 4 se verá así.