A través del siguiente Script vamos a validar los campos de un formulario, indicando los posibles errores al usuario mediante alertas.
En la mayoría de formularios podemos encontrar los siguientes tipos de campos:
- Texto (Nombre, Apellidos, Dirección, Comentarios)
- Numérico (Teléfono, Código Postal, Edad)
- Lista/Menú (Provincia, Sexo)
- Checkbox (Condiciones Generales, Aviso Legal)
Colocamos el Script antes de la etiqueta </head>
//Abrimos el Script <script type="text/javascript"> //Nombramos la función function valida_envia(){ //Definimos los caracteres permitidos en una dirección de correo electrónico var regexp = /^[0-9a-zA-Z._.-]+\@[0-9a-zA-Z._.-]+\.[0-9a-zA-Z]+$/; //Validamos un campo o área de texto, por ejemplo el campo nombre if (document.form.nombre.value.length==0){ alert("Tiene que escribir su nombre"); document.form.nombre.focus(); return 0; } //Validamos un campo de texto como numérico, por ejemplo el campo teléfono de 9 dígitos valor = document.form.telefono.value; if( !(/^\d{9}$/.test(valor)) ) { alert("Tiene que escribir un teléfono de 9 dígitos"); document.form.telefono.focus(); return 0; } //Validamos un campo de texto como email if ((regexp.test(document.form.email.value) == 0) || (document.form.email.value.length = 0)){ alert("Introduzca una dirección de email válida"); document.form.email.focus(); return 0; } else { var c_email=true; } //Validamos un campo de lista/menú, por ejemplo el campo provincia if (document.form.provincia.selectedIndex==0){ alert("Tiene que seleccionar su provincia"); document.form.provincia.focus(); return 0; } //Validamos un campo de tipo checkbox, por ejemplo condiciones if (document.form.condiciones.checked==0){ alert("Debe aceptar las condiciones"); document.form.condiciones.focus(); return 0; } //Si todos los campos han validado correctamente, se envía el formulario document.form.submit(); } //Cerramos el Script </script>
Ejecutamos la función cuando el usuario hace clic en el botón enviar de nuestro formulario.
<label><input type="button" id="enviar" onclick="valida_envia()"/></label>
47 Comentarios
ayudaron a validar mis formularios
Saludos desde Puebla, México.
Gracias.
soy nuevo en esto
saludos
Un saludo.
Espero que te sirva de ayuda.
También puedes revisar el siguiente post donde intento explicar como usar los SpryAssets http://goo.gl/l1sQT6
Gracias.
Me estaba volviendo loco buscando cómo validar el checkbox con Dreamweaver hasta que he dado con tu comentario.
He modificado un poco tu script para ajustarlo a los campos que tenía y ha funcionado a la primera.
Muchas gracias.
Puedes revisar si quieres la función mail de PHP para el envío de formularios: http://goo.gl/VcDnrT
Para realizar el envío del formulario, puedes crear un archivo PHP (enviar.php) con la función mail y en el formulario de contacto debes indicar como action="enviar.php"
Espero haber resuelto tu duda. Un saludo.
Saludos!
Si te refieres a si existe algún otro método para validar todos los campos a la vez, te recomiendo usar los SpryAssets http://goo.gl/l1sQT6
Espero haber aclarado tu duda. Saludos.
Para validar un campo de archivo, el procedimiento es exactamente el mismo que para un campo de texto.
Un saludo.
como le hago tengo 10 validaciones y si no lleno ningun campo me manda las 10 necesito que me mande alert 1 por cada submit
Saludos!
Tengo un formulario al que estoy intentando añadir un checkbox con la política de privacidad, que tiene que estar marcado obligatoriamente para que se envíe.
Estoy intentando adaptar tu código, pero no me funciona. Puedes ayudarme, por favor?
Te paso el ejemplo: http://www.estherserra.com/pop-up/index_popup.html
Todo me funciona, pero no consigo que me pida que marque el checkbox antes de enviar...
Muchas gracias!
Debes poner en la etiqueta action de tu formulario el nombre del archivo.php que se encargará de procesar la acción correspondiente (enviar por email, grabar en una base de datos, etc.): <form action="nombre-de-tu-archivo.php" method="post"...
Un saludo.
Los datos no se borran al enviar el formulario y ejecutar el script, tienes que revisar tu código. Puedes descargar un ejemplo justo al final del post.
Un saludo.
saludos
En realidad, siempre debe llevarte al primer campo donde encuentre un error o esté vació y sea requerido.
Saludos.
Intente con esta ^[0-9]{8,10}$
Pero el problema ahi es que si pongo un numero de 9 digitos tambien lo acepta y es lo que no quiero.
Espero me puedas ayudar, Saludos!!
Estoy buscando la manera de en un formulario que se acepten unas determinadas palabras como "permitidas".
He encontrado el atributo Pattern con el que defino qué tipo de palabras, pero no sé hacer que sean sólo y exclusivamente las de un listado en concreto.
¿Para qué quiero esto? Para poner un formulario y que cuando lo rellenen, si tienen un código de invitación pueda el formulario enviar el mismo y sin ese código pues que no lo haga.
Agradecería tu ayuda si fueras tan amable y un saludo
Ulises de A1Click
pd.-Como sé lo que cuesta mantener un blog...te pinché en un par de anuncios jeje :)
var code = /(codigo1|codigo2)/; // aquí introducirías tu listado de códigos válidos
if ((code.test(document.form.codigo.value) == 0) || (document.form.codigo.value.length = 0)){
alert("Introduzca un código valido");
document.form.codigo.focus();
return 0;
} else {
var c_codigo=true;
}
Espero que te sirva esta posible solución.
Saludos.
Voy a probar,y cuando digo probar es literal porque al no tener mucha idea de lo que hago voy más por ensayo error que por otra cosa...eh, pero cabezón yo que al final lo consigo y esta vez no va a ser menos. jajajaja
Vuelvo a picar en la publicidad.
Gracias
Lo único que tienes que asegurarte de cambiar es tanto el nombre del formulario como del campo código, es decir, donde pone form en la función javascript debes cambiarlo por el nombre de tu formulario y donde pone codigo por el nombre de tu campo donde los usuarios deben introducir los códigos.
Si tienes cualquier otra duda, ya sabes!
Saludos.
Te envié un mensaje por el formulario de contacto porque no me dejaba poner aquí el código.
Un saludo y gracias eternas.
Cuando en el formulario pongo lo siguiente
--input name="Referenciado por" type="text" required class="form-control" pattern="CARACOL|PATATA" id="Referenciado por" placeholder="Pon el Código Vip o pídeselo a un amigo"--
En pattern coloco las claves separadas por la barrita esa vertical y listo.
Jo....vaya...miles de gracias por tu ayuda.
Al final lo más simple es lo que me sirvió.
Un abrazo