Hola chicos, para realizar este ejercicio, que por cierto está muy chulo, me estoy encontrando con un problema y es que no consigo hacer un onsubmit dinámico. Verifico mis datos de forma dinámica, pero el ejercicio pide que cuando presionemos el boton submit se verifique de nuevo y avise al usuario si los datos estan correctamente escritos o que campos no están bien escritos.Aquí es donde estoy encontrando el problema, me gustaría que me dieran una ayuda de lo que hago mal, porque se me envia el formulario sin pasar por mi función validarDatos() que he definido cuando realizo el submit.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script>
window.onload=function(){
var nombreOk=false;
var apellidoOk=false;
var edadOk=false;
var emailOk=false;
function validarDatos(){
if (nombreOk && apellidoOk && edadOk && emailOk){
alert("Ha introducido todos los datos correctamente");
return true;
}else{
alert("Hay errores");
return false;
}
}
var everyInputs=document.getElementsByTagName('input');
for (var i=0;i<(everyInputs.length);i++){
everyInputs[i].addEventListener('focus',estilo);
everyInputs[i].addEventListener('blur',estilo2);
var nodoname=everyInputs[i].name;
switch (nodoname){
case "nombre":
everyInputs[i].addEventListener('blur',validarNombre);
break;
case "apellido":
everyInputs[i].addEventListener('blur',validarApellido);
break;
case "edad":
everyInputs[i].addEventListener('blur',validarEdad);
break;
case "email":
everyInputs[i].addEventListener('blur',validarEmail);
break;
default :break;
}
}
function estilo(){
this.style.backgroundColor="yellow";
}
function estilo2(inputElement){
this.style.background='transparent';
this.nextSibling.src="http://images.all-free-download.com/images/graphiclarge/tick_ok_sign_4190.jpg";
}
function estiloRojo(inElement){
inElement.style.backgroundColor="red";
inElement.nextSibling.src="http://griponclimate.files.wordpress.com/2013/03/wrong.png";
}
function validarNombre(){
var nombre=document.getElementById("nombre");
var expresionRegular=/^\w{3,}$/;
if ((expresionRegular.test(nombre.value))==true){
nombreOk=true;
estilo2(nombre);
}
else {
nombreOk=false;
estiloRojo(nombre);
}
}
function validarApellido(){
var apellido=document.getElementById("apellido");
var expresionRegular=/^\w{3,}$/;
if ((expresionRegular.test(apellido.value))==true){
apellidoOk=true;
estilo2(apellido);
}
else {
apellidoOk=false;
estiloRojo(apellido);
}
}
function validarEdad(){
var edad=document.getElementById("edad");
if ((edad.value>10) && (edad.value<99)){
edadOk=true;
estilo2(edad);
}
else {
edadOk=false;
estiloRojo(edad);
}
}
function validarEmail(){
var valorEmail=document.getElementById("email");
var expresionRegular=/^([\w-\.]{3,}\@.+\..+)$/;
var email=convertirMinusculas(valorEmail.value);
email=comprobarAtEmail(email);
if ((expresionRegular.test(email))==true) {
emailOk=true;
estilo2(valorEmail);
}
else {
emailOk=false;
estiloRojo(valorEmail);
}
}
function convertirMinusculas(email){
return email.toLowerCase();
}
function comprobarAtEmail(email){
var expresion=/\sat\s/g;
return email.replace(expresion,'@');
}
function validarDatos(){
var msg='Los datos que debe rectificar son:';
if (nombreOk && apellidoOk && edadOk && emailOk){
alert ("Ha introducido todos los datos correctamente y su formulario va a ser enviado");
return true;
}else{
if (nombreOk===false){
msg = msg + 'nombre';
}
if (apellidoOk===false){
msg = msg + 'apellido';
}
if (edadOk===false){
msg = msg + 'edad';
}
if (emailOk===false){
msg = msg + 'email';
}
alert (msg);
return false;
}
}
}
</script>
<body>
<h1>La web para aprender programacion</h1>
<p>Esta cantidad de eventos puede resultar desconcertante por excesiva. No te preocupes por entender ahora el significado de cada uno de ellos. Simplemente ten unas nociones básicas que te permitan resolver los retos que como programador te puedan ir surgiendo.</p>
<p>Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.</p>
<img id="img1" src="http://i.imgur.com/tq5Bs.png" />
<form name="miniformualario" class="formulario" method="get" onsubmit="return validarDatos()">
<label >Escriba nombre</label>
<input type="text" id="nombre" name="nombre"/><img width="20" height="20"/><br/>
<label>apellidos</label>
<input type="text" id="apellido" name="apellido"/><img width="20" height="20"/><br/>
<label>edad</label>
<input type="text" id="edad" name="edad"/><img width="20" height="20"/><br/>
<label>Correo electronico</label>
<input type="text" id="email" name="email"/><img width="20" height="20"/><br/><br/>
<input type="submit" value="Enviar" />
<input type="reset" value="Reiniciar datos" />
</form>
<script>
</script>
</body>
</html>
Tema: JavaScript onsubmit dinámico para validar formulario comprobar datos CU01159E (Leído 6726 veces)
RSS -
WAP2