Validar formularios con Dreamweaver

Dreamweaver contiene una utilidad para validar formularios en JavaScript sin necesidad de programar el código. Lo único que debemos hacer es crear el formulario en cuestión, y con unos simples clics, validar uno a uno los campos del mismo.

Crear el formulario

Para crear un formulario en Dreamweaver, tenemos que insertarlo desde [Insertar > Formulario > Formulario], o bién, hacerlo desde la barra de herramientas rápida que incluye el editor:

Y veremos las siguientes opciones para crear diferentes tipos de campos. Con ellas, creamos un Formulario, los campos de texto, y al final un botón de envío.

Tendremos algo como lo siguiente:

Idenificar los componentes del formulario

Tendremos que darle una identidad a cada componente del formulario, para ello haremos clic sobre el campo y en el apartado Propiedades le pondremos el nombre y otras configuraciones si son necesarias.

Validando el formulario

Para validar es necesario contar con la ventana Inspector de etiquetas. Si no la tenemos visible a la derecha, tendremos que agregarla yendo a [Ventana > Inspector de etiquetas].

Luego, dentro del formulario, seleccionamos el botón Enviar, vamos a la ventana Inspector de etiquetas, y dentro de la solapa Comportamientos daremos clic sobre el signo +. Allí elegimos Validar formulario.

Especificaremos en cada uno de los componentes del formulario lo qué es aceptado dentro del mismo:

Valor
Obligatorio: con esta opción el campo debe tener un valor, no puede quedar vacío.

Aceptar
Cualquier cosa: acepta todos los caracateres.
Dirección de correo electrónico: sólo dirección de email, el script chequea que el email sea escrito correctamente.
Número: sólo números.
Número del… al…: sólo números entre un inicio y un fin, ideal para fechas.

Dando clic en Aceptar ya tendremos el formulario validado.

Traducir los errores

El script que genera el Dreamweaver está en inglés, por lo cuál los mensajes que muestra durante la validación estarán en ese idioma. Pero éstos pueden ser editados y traducidos fácilmente por nosotros yendo a la solapa Código para ver el código fuente, y allí modificamos lo escrito en negrita e itálica dentro del JavaScript:

<script language="JavaScript" type="text/JavaScript">
<!–
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_validateForm() { //v4.0
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=MM_findObj(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 contener una dirección de email válida.n’;
} else if (test!=’R’) { num = parseFloat(val);
if (isNaN(val)) errors+=’- ‘+nm+’ debe contener un número.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+’ debe ser entre ‘+min+’ y ‘+max+’.n’;
} } } else if (test.charAt(0) == ‘R’) errors += ‘- ‘+nm+’ es obligatorio.n’; }
} if (errors) alert(‘Error(es) en el formulario:n’+errors);
document.MM_returnValue = (errors == ”);
}
//–>
</script>

Ejemplo funcionando

Puedes ver un ejemplo de este artículo aquí.

Deja un comentario

  • karina

    buenas tardes, una pregunta, en caso de que ya no exista ningun error en los datos del formulario, que linea de codigo y donde se agregaria, para que nos enviara un mensaje de REGISTRO CON EXITO ? agradeceria su respuesta 🙂