Foros del Web » Programando para Internet » Javascript »

Validacion campos formulario javascript

Estas en el tema de Validacion campos formulario javascript en el foro de Javascript en Foros del Web. Buenas, mi nombre es Adolfo, es la primera vez que entro en este foro, estoy estudiando javascript y tengo una duda en un ejercicio que ...
  #1 (permalink)  
Antiguo 17/06/2012, 06:02
 
Fecha de Ingreso: junio-2012
Ubicación: Sevilla
Mensajes: 2
Antigüedad: 11 años, 10 meses
Puntos: 0
Validacion campos formulario javascript

Buenas, mi nombre es Adolfo, es la primera vez que entro en este foro, estoy estudiando javascript y tengo una duda en un ejercicio que tengo que hacer. Tengo que hacer varias validaciones en campos de formularios, pero no se como menter varias funciones dentro de una función validar, que sera validada a traves del evento OnSubmit;

Estas son las validaciones que tengo que hacer;
Los valores introducidos en el formulario deberán de validarse. Todos los
campos son obligatorios salvo las Aficiones. El Nombre, los Apellidos y los
Comentarios no pueden estar vacíos. El Nombre y los Apellidos solamente
admitirán letras. La Fecha de Nacimiento debe ser una fecha válida y anterior al día
de hoy. El teléfono solamente admitirá 9 números. El correo electrónico será del
tipo [email protected]ón.

Tengo todas las funciones que hacen estas validaciones pero no se como menterlas todas juntas para que las valide el evento onsubmit. Como puedo hacer para que funcionen todas funciones dentro de validar Onsubmit;

Muchas gracias.

<html>
<head>

<script>

function validar()
{
var nombre;
var apellidos;
var telefono;
var correo;
var fecha;
var provincia;
var sexo;


function validarLongitud(campo,longitud)
{
if ((campo.value.length < longitud)||(campo.value.length > longitud))
{
return false;
}
else
{
return true;
}
}

function validarSoloTexto(campo)
{
var checkOK = "ABCDEFGHIJKLMNÑOPQRSTUVWXYZÁÉÍÓÚ" + "abcdefghijklmnñopqrstuvwxyzáéíóú";
var checkStr = campo.value;
var allValid = true;
for (i = 0; i < checkStr.length; i++)
{
ch = checkStr.charAt(i);
for (j = 0; j < checkOK.length; j++)
{
if (ch == checkOK.charAt(j))
{
break;
}
}
if (j == checkOK.length)
{
allValid = false;
break;
}
}
return allValid;
}



function validar_correo_e(correo)
{
// Patrón
var b=/^[^@\s]+@[^@\.\s]+(\.[^@\.\s]+)+$/
// Devuelve verdadero si validación OK, y falso en caso //contrario
return b.test(correo)
}

nombre=document.formulario.nombre.value;
if(nombre=="")
{
alert ("debe introducir un nombre")
}





apellidos=document.formulario.apellidos.value;

if(apellidos=="")

{
alert ("debe introducir un apellido")
}


fecha=document.formulario.fecha.value;




correo=document.formulario.correo.value;














provincia=document.formulario.provincia.selectedIn dex;


if (document.formulario.sexo[0].checked)

{ sexo="hombre";
alert(sexo);
}



if (document.formulario.sexo[1].checked)

{
sexo="mujer";
alert(sexo);
}




if ((!document.formulario.sexo[0].checked) && (!document.formulario.sexo[1].checked))

{
alert("El sexo es obligatorio");
}


}









</script>
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<title>PracticaLM</title>
</head>
<body>
<form onSubmit="validar();" name="formulario">
Nombre: <input type="text" id="nombre" name="nombre" /><br /><br />
Apellidos: <input type="text" id="apellidos" name="apellidos" /><br /><br />
Fecha de Nacimiento: <input type="text" id="fecha" name="fecha" /><br /><br />
Telefono: <input type="text" id="telefono" name="telefono" /><br /><br />
Correo Electronico: <input type="text" id="correo" name="correo" /><br /><br />


Provincia: <br />
<select name="provincia" id="provincia">
<option value="vacio"></option>
<option value="sevilla">Sevilla</option>
<option value="jaen">Jaén</option>
<option value="cadiz">Cádiz</option>
<option value="cadiz">Huelva</option>
<option value="cadiz">Córdoba</option>
<option value="cadiz">Granada</option>
<option value="cadiz">Almería</option>
<option value="cadiz">Malaga</option>
<br />
</select> <br /><br />
Sexo: <br /><input type="radio" id="sexo" name="sexo" value="hombre" /> Hombre
<input type="radio" name="sexo" value="mujer" /> Mujer<br /> <br />

Aficiones:<br />

<input type="checkbox" id="aficiones1" name="aficiones" value="cine" />cine<br />
<input type="checkbox" id="aficiones2" name="aficiones" value="futbol" />Fútbol<br />
<input type="checkbox" id="aficiones3" name="aficiones" value="leer" />Leer<br />
<input type="checkbox" id="aficiones4" name="aficiones" value="Bici" />Bici<br /><br />
Comentarios: <br /><br />
<textarea rows="2" cols="20">
</textarea></br><br />
<input type="Submit">Aceptar</input>
<input type="reset">Cancelar</input>
</form>



</body>




</html>
  #2 (permalink)  
Antiguo 17/06/2012, 14:22
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Validacion campos formulario javascript

En primer lugar, binevenido a FDW @adolfogt.
Sin ponerme a analizar si todas tus validaciones son correctas. Lo que entiendo es que querés hacer que todos los campos sean validados en conjunto, y luego mostrarle al usuario posibles errores.

a ver si esta estructura te orienta

con el evento onsubmit hacés validar(), vamos a asumir que en nuestras condiciones el if es para correcto en tanto el else para incorrecto. No te desarrollo toda la validación, es solo n ejemplo

Código Javascript:
Ver original
  1. // inicializás una variable denominada mensaje_error
  2. var mensaje_error = "";
  3.  
  4. function validar(){
  5.  
  6. if(nombre != ""){
  7. // ok
  8. }else{
  9. mensaje_error += "nombre incorrecto<br>";
  10. }
  11.  
  12. if(email != ""){
  13. // ok
  14. }else{
  15. mensaje_error += "email incorrecto<br>";
  16. }
  17.  
  18. // haces lo mismo aplicando las validaciones necesarias, una vez hecho todo
  19.  
  20.  
  21. if(mensaje_error != ""){
  22. // es decir hay algun error
  23. document.getElementById('mensajes').innerHTML = "mensaje_error";
  24. return false; // evitás el envío
  25. }
  26.  
  27. }

y tu html

Código HTML:
Ver original
  1. <form action="x.php" onsubmit="return validar()">
  2. tu form
  3. </form>
  4. <div id="mensajes">
  5. <!-- div para imprimir los mensajes de error -->
  6. </div>
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 17/06/2012, 16:43
 
Fecha de Ingreso: junio-2012
Ubicación: Sevilla
Mensajes: 2
Antigüedad: 11 años, 10 meses
Puntos: 0
Respuesta: Validacion campos formulario javascript

Muchas gracias, me ha sido de gran ayuda, el inicializar una variable para que guarde los errores es una muy buena idea.

Un saludo y gracias de nuevo.

Etiquetas: campos, formulario, funcion, html, input, select
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 19:19.