<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Validación de formulario</title>
</head>
<body>
<form method="post">
<label for="campo1">Campo 1</label>
<br>
<input type="text" id="campo1" name="campo1" required title="Campo 1">
<br>
<input type="button" onclick="validaForm(this.form);" value="Enviar">
</form>
<script>
function validaForm(e){ var texts = e.getElementsByTagName('input'); for (var i = 0; i < texts.length; i++) { if ((texts[i].type === 'text' || texts[i].type === 'password') && texts[i].value.trim() === "" && texts[i].required === true) { var title = texts[i].getAttribute('title'); //alert(texts[i]);
alert("Por favor complete el campo: " + title); texts[i].focus();
texts[i].style.borderColor = "red";
texts[i].style.borderStyle = "dashed";
return false;
}else if(texts[i].type === "text"){ texts[i].style.borderColor = "green";
texts[i].style.borderStyle = "outset";
}
}
var selects = e.getElementsByTagName('select'); for (var i = 0; i < selects.length; i++) { if (selects[i].value === "" && selects[i].required === true) { var title = selects[i].getAttribute('title'); alert("Por favor selecione: " + title); selects[i].style.borderColor = "red";
selects[i].style.borderStyle = "dashed";
selects[i].focus();
return false;
}else{ selects[i].style.borderColor = "green";
selects[i].style.borderStyle = "outset";
}
}
}
</script>
</body>
</html>
Crear cuenta
Comentarios sobre la versión: 1.0 (2)