Javascript & Dreamweaver: Validar formularios.

Hoy toca aprender a validar un formulario a través de Dreamweaver.. ya que la gran mayoría de los que llegáis a mi blog utilizáis este programa para editar código y de una forma u otra, resulta más fácil, os voy a explicar un poquito cómo validar un formulario, para que podáis poner campos obligatorios y evitar que os lleguen emais vacíos.

Voy a validar un formulario sencillito con un campo para el nombre, otro para el teléfono y otro para el email, en unos días publicaré un artículo para validar formularios más completos, pero ya sin Dreamweaver.

Nota: Doy por hecho que tenéis un formulario previamente hecho, Dreamweaver instalado y conocimientos mínimos de éste. Es importante tener nuestros campos identificados con la etiqueta name para poder diferenciarlos.

1.- Abrimos el archivo con nuestro formulario en Dreamweaver y lo dejamos en vista «Dividir» (Ver > Código y diseño).

2.- Seleccionamos desde la pantalla de Diseño el botón Submit.
3.- Ahora nos vamos a la venta Comportamientos que aparece en el menú derecho (sino apareciera por defecto la puedes hacer visible desde el menú Ventana > Comportamientos) y clicamos sobre el signo + que aparece, acordaros de tener el botón Submit seleccionado.
4.- Nos aparecerá un menú desplegable, ahí seleccionamos Validar formulario.

5.- Se abre una ventana nueva en la que aparecen los campos de nuestro formulario, ahora tenemos que seleccionar un campo y aplicarle los atributos que deseemos.

Por ejemplo, selecciono el campo email y marco la opción de Obligatorio (para que obligue al usuario a rellenarlo, así si este no contiene algo no se enviará el formulario) y marco también la opción de Dirección de correo electrónico, para que no se pueda escribir cualquier cosa en ese campo, si no que deba ser obligatoriamente una dirección de email.

Una vez validados todos los campos le damos a Aceptar.

6.- Ahora comprobaremos que se ha añadido código javascript a la cabecera de nuestro documento, concretamente esto:

<script type="text/javascript">
<!--
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!="") {
if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
} else if (test!='R') { num = parseFloat(val);
if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
} if (errors) alert('The following error(s) occurred:\n'+errors);
document.MM_returnValue = (errors == '');
} }
//-->
</script>

Éste código es la función en Javascript que nos valida el formulario, si el usuario no rellena los campos o no cumple las reglas, lanzará un mensaje advirtiéndole de ello. Por defecto aparece el mensaje en inglés pero lo podemos cambiar y poner el texto que deseemos editando unas líneas.

7.- Para cambiar el mensaje que aparece si no escribes bien la dirección de email, debemos editar esta línea:

if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';

en mi caso escribí esto:

if (p<1 || p==(val.length-1)) errors+='- '+nm+' debe contener un email válido.\n';

La siguiente línea te indica que debes escribir sólo numeros en ese campo:

if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';

Ésta que debe ser un número comprendido entre mín y máx especificados:

if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';

Aquí nos dice que campos deben ser rellenados obligatoriamente:

} } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }

Y este es el título de los errores, dice concretamente: Ocurrieron los siguientes errores:

} if (errors) alert('The following error(s) occurred:\n'+errors);

Modificando esas líneas con el texto que deseemos ya tendremos nuestro script en castellano ;)

8.- Ya sólo nos queda comprobar que se haya insertado la llamada a la función el el botón submit:

<input type="submit" onclick="MM_validateForm('nombre','','R','telefono','','RisNum','email','','RisEmail');return document.MM_returnValue" value="enviar" />

Y.. listo, podemos subir nuestro archivo al servidor sabiendo que obligará al usuario a rellenar los campos que deseemos y nos ahorramos que nos lleguen mensajes vacíos :P

  • 14 septiembre 2008
  • Maquetación
  • , ,

31 comments on “Javascript & Dreamweaver: Validar formularios.”

  1. Hola! Me gustaría hacer una variación de las alertas que saca dw para los campos no rellenos.
    Mi intención sería poner un texto oculto con css justo al lado del campo requerido y si no se ha rellenado correctamente que el javascript muestre ese texto…

    ¿es posible??

  2. Un millón de graciassss, me gustaría saber cómo agregar un cartel de fomulario enviado con éxito, voy a intentar con mis mínimos conocimientos de programación a ver si sale :P
    Desde ya te felicito por el blog y todas las cosas útiles que publicás, seguí adelante. Un saludo

  3. Necesito validar conjuntos de botones de radio que se encuentran en fieldsets.
    ¿Cómo recorro todos los fieldssets, y a su vez en conjunto de botones, de manera que obligue al usuario a seleccionar uno para que pueda pasar a otra página?
    Espero haberme dado a entender.
    Agradeceré su ayuda

    1. Hola Andrea!

      A ver si te vale con esto:

      if (formulario.radio[0].checked) { – aqui iria la accion que quieras – }

      Cambiando formulario por el name de tu formulario, y radio por el de tu conjunto de botones, en este ejemplo seleccionamos el primer radio que encuentra, poniendo un 1 sería el segundo, etc.. Ahí ya puedes validar si hay alguno seleccionado o no, ¿Era esto lo que necesitabas?

      Un saludo!

  4. Lo que pasa es que tengo un cuestionario de más de 10 preguntas, quiero en este caso que todas las preguntas estén respondidas para pasar a otra página.
    ¿Hay forma de trabajar ése cuestionario a manera de matriz? Es decir, que recorra cada pregunta y verifique que ninguna se quede sin tener checado un botón de opción.
    Debo mencionar que hay un pequeño «detalle», no todas las preguntas tienen el mismo número de respuestas, la mayoría tienen 4 respuestas, pero hay otras en las que tienen 6 o 7.
    Otra cosa, en mi cuestionario, la pregunta 1 da la pauta para permitir o denegar el acceso a las demás. Por ejemplo, si se selecciona en la primera pregunta la opción Sí (por mencionar algo) que le habilite al usuario las preguntas de la 3 a la 10 (la 2 NO). En caso contrario, si se elige la opción No, que le habilite sólo la pregunta 2, (las demás no)¿Me explico?
    … Tal vez sea mucho lo que pido pero, no estoy familiarizada con este lenguaje, no hallo cómo. Tengo la idea, sé lo que debo hacer pero el «cómo» es el problema. Espero puedas ayudarme

  5. Natali, mil gracias por tu respuesta, es muy amable de tu parte.
    Pues como ya dije antes, no tengo manejo de PHP, pues acabo de terminar mi cuarsad de Diseño Web Básico y aún me queda cursar el avanzado.
    por todo ello, va una nueva pregunta: existe alguna manera de que, luego de que mis visitantes hagan clic en «Enviar», no sean derivados a una página externa sino que se queden en la mía?

  6. Este articulo me ayudo mucho. Gracias por ser buena onda! Segui asi.
    Pero me encontre con una dificultad que no pude resolver que quiza le sirva a la pregunta anterior de Andrea.
    Dreamweaver no tiene en cuenta los radio.
    Yo tengo un formulario donde tengo texto y radio.
    Encontre una accion de validacion de radio que agrege a la funcion javascript de Dreamweaver.
    Lo que agrege fue:
    var radioz=0;
    for(i=0; ele=document.seleccion.elements[i]; i++){
    if (ele.type==’radio’)
    if (ele.checked){radioz=1;break;}}
    if (radioz==1){»}else{
    alert(‘Debe seleccionar un radio’);return false;}

    Me gustaria que no pase a la siguiente pagina si no hay porlomenos un radio.
    Digo esto porque el mensaje de alerta me aparece, pero pasa igual.
    No se como evitar el submit.
    Y si si puede (pero no tan importante como lo anterior) que este en el mismo mensaje de alerta.

    Un ejemplo de lo que hablo es esto:
    http://elcasamiento.site90.net/ayuda/ayuda.html

    Desde ya muchisimas gracias

    1. Hola Diego!
      En el ejemplo que pones lo hace bien, no? ¿Ese es el tuyo? ¿Lo has conseguido o quieres hacerlo como ese?
      Si es que quieres hacerlo como ese, sencillo, mira el código fuente de esa página y ahí te puedes orientar, el javascript se muestra ;)
      Saludos!!

  7. Natali, ya encontre la solucion a mi problema. Era que estaba mal incrustado la funcion de validacion de radio en la funcion de validacion de Dreamweaver.
    Conclusion:
    Para que la funcion javascript de Dreamweaver valide tambien a los radio (normalmente no los tiene en cuenta) se le puede agregar una condicion. Aca se muestra como quedaria el script.

    <!–
    function MM_validateForm() { //v4.0
    if (document.getElementById){
    var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
    for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
    if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
    if (p<1 || p==(val.length-1)) errors+='- '+nm+' debe ser un mail valido.\n';
    } else if (test!='R') { num = parseFloat(val);
    if (isNaN(val)) errors+='- '+nm+' debe contener un numero.\n';
    if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
    min=test.substring(8,p); max=test.substring(p+1);
    if (num<min || max

    Un ejemplo funcionando seria:
    http://elcasamiento.site90.net/ayuda/ayuda.html

    Saludos
    PD: puedes borrar mi mensaje anterior, para no confundir al lector. Gracias

  8. Gracias por la ayuda, pero aun así tengo un pequeño problema: el formulario advierte que existen errores porque hay casillas que no se rellenaron bien pero aun así cuando le doy al botón de aceptar se envía el formulario igualmente. Esto ¿como lo puedo solucionar? muchas gracias

  9. Hola… hace mucho q no esta esto activo, pero por si acaso.
    Me has resuelto mi problemilla con los formularios, pero Dreamweaver me da un error cuando quiero validar: «La realización de este cambio puede exigir el cambio del código bloqueado por una plantilla o un traductor. Se omitirá el cambio» ¿alguna solucion?
    Mil gracias :D

  10. Hola nnatali, el código está muy bien yo no tengo mucha idea de javascript pero si de otros lenguajes. Y hace un momento estaba haciendo un form y chequeaba los campos en java para luego guardarlo en php y me di cuenta que si dejas espacios (pulsando la tecla «espacio» en los campos) los daba por buenos por lo tanto utilizo la función «trim» que corta los espacios por los dos lados, por lo tanto si el campo solo tiene espacios, lo toma como vacío. (no he chequeado eso en tu código). Un saludo

  11. Hola, la verdad que me salvaste con este post….
    no tenia idea de como hacerlo,y lo estaba tratando de hacer a base de puros if’s…. por buena suerte me tope con tu blog, gracias…

    seguire visitandolo

  12. Hola, he realizado un formulario utilizando php en una web que he realizado con dreamweaver pero no consigo validar los campos utilizando MM_validateForm. Esto es lo que escribo:

    Al pulsar el botón encagar (enviar) ignora la validación y envío el formulario aunque no haya escrito nada. ¿Alguien puede ayudarme? Llevo un buen rato buscando información y probando…

    Muchas gracias de antemano.

  13. Como hago para validar un campo que solo me acepte texto lo necesito solo a modo codigo y como hago para crear un formulario tambien solo a modo codigo soy un novato en esto gracias

  14. Hola soy de Mexico
    Necesito saber como puedo hacer un Blog de Opinion o Sistema de comentarios parecido a este, necesito que me ayuden en eso hehehe por favor! :)

  15. Buen día. Me pareció muy interesante este ejercicio sin embargo, ando buscando cómo modificar este mismo código que se genera en automático para validar otros puntos en en un campo de EMAIL como: que no contenga caracteres inválidos (ñ,á,/: doble punto ,etc), mayúsculas o que valide que lleven en algún lugar .com, , .net, .,etc.
    ¿Existe la forma de integrarlo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *