mejorar la validación de campos

carolina3 · #1 (**permalink**) 18/05/2012, 10:10

Hola muy buenas por fin he conseguido crear una validación de formulario, que me costo lo mio pues poco se de javascript, el caso es si alguien me podria ayudar un poquito a mejorarlo pudiendo indicar por ejemplo que email sea un email correcto la contraseña un mínimo de caracteres cosas así.

y si se pueden cambiar los mensajes de alerta por una imagen propia o cambiar el titulo de la ventana.

este es el código supongo que es un código sinplon pero bueno por algo se empieza.

Código Javascript:

Ver original// JavaScript Document
function valida_envia(){ 
    //valido el nombre 
    if (document.form1.tienda.value.length==0){ 
         alert("Tiene que escribir el nombre de su tienda") 
         document.form1.tienda.focus() 
        return false; 
    } 
    //valido email
    if(document.form1.email.value.length==0) { //comprueba que no esté vacío
        alert('No has escrito tu e-Mail correctamente');
        document.form1.email.focus();
        return false;
  }
 
    //valido la contraseña. 
    if(document.form1.pasword.value.length==0) { //comprueba que no esté vacío
        alert('No has escrito tu contraseña correctamente');
        document.form1.pasword.focus();
        return false;
  } 
 
    //valido el interés 
    if (document.form1.tipo_de_tienda.selectedIndex==0){ 
         alert("Debe seleccionar un tipo de tienda.") 
         document.form1.tipo_de_tienda.focus() 
        return false; 
    } 
 
    //el formulario se envia 
    alert("Muchas gracias por enviar el formulario"); 
    document.form1.submit(); 
}

emprear · #2 (**permalink**) 18/05/2012, 15:04

un ejemplo para el email

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
/*<![CDATA[*/
label{
width: 150px;
display: inline-block;
}
 
/*]]>*/
</style>
<script type="text/javascript">
 
function validar(){
var nombre = document.getElementById('nombre').value;
var email = document.getElementById('email').value;
var email2 = document.getElementById('email2').value;
var formato = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
 
// validamos si el campo nombre está vacío o no
nombre = nombre.replace(/(<([^>]+)>)/ig,""); // quitás posible código html
nombre = nombre.replace(/^\s+/g,'').replace(/\s+$/g,'');// limpias espacios en blanco al inicio y final del nombre
if(nombre == ''){
alert('Ingrese su nombre')
return false;
}
 
var regex_email = formato.test(email);
 
if((regex_email != true)||(email == "")){
alert('Email no válido');
return false;
}
 
var regex_email2 = formato.test(email2);
 
if((regex_email2 != true)||(email2 == "")){
alert('Email2 no válido');
return false;
}
 
if(email != email2){
alert('los emails no coinciden');
return false;
}
/// Si no hubo ningún error, el form se procesa
alert('gracias ' + nombre);
}
 
</script> 
</head>
<body>
<div>
<form action="#" onsubmit="return validar();">
<label for="nombre">Nombre: </label><input type="text" value="" id="nombre" name="nombre" /><br />
<label for="email">Email: </label><input type="text" value="" id="email" name="email" /><br />
<label for="email2">Verificar Email: </label><input type="text" value="" id="email2" name="email2" /><br />
<input type="submit" value="Enviar" />
</form>
</div>
</body>
</html>

las longitudes de las cadenas, tendrias que chequear la propiedad length

Para las alertas, crear una capa/span con un id asignado, por ejemplo

y antes del return false; haces un innerHTML con el texto del error
Otra variante es que no hagas un return false por cada elemento validado, sino que lo hagas asi

al inicio de la función inicializás una variable con un valor = ""
var mensaje="";

en cada validacion por ejemplo, el nombre, en lugar de esto
if(nombre == ''){
alert('Ingrese su nombre')
return false;
}

hacés

if(nombre == ''){
mensaje += "Falta nombre";
}

se usa el += para concatenar los valores
después con otra

if((regex_email != true)||(email == "")){
mensaje += "email no vválido";
}

ahora si, trás todas las validaciones

if(mensaje != ""){
// haces un innerHTML a la capa que creaste con los mensajes con el valor de la variable mensaje
return false; // -> cancelás el submit
}

Saludos