Tengo un formulario hecho en HTML con varios controles y un script en javascript para validar si estan llenos o no, el problema es que quiero validar cada uno pero no hacer una funcion para cada control
window.onload = function () {
document.getElementById('placa').onblur = Validar;
document.getElementById('modelo').onblur = Validar;
document.getElementById('municipio').onblur = Validar;
//funcion para que le de el foco no mas se pase el mouse
document.getElementById('placa').onmouseover = Foco;
document.getElementById('modelo').onmouseover = Foco;
document.getElementById('municipio').onmouseover = Foco;
}
function Foco(){
var placa = document.getElementById('placa');
placa.focus();
}
function Validar(){
var placa = document.getElementById('placa');
placa.addEventListener('input', function(evt) {
this.setCustomValidity('');
});
placa.addEventListener('invalid', function(evt) {
// Required
if (this.validity.valueMissing) {
this.setCustomValidity('Por favor digitar la placa');
this.focus();
}
});
}
<!DOCTYPE html>
<html lang = "es">
<head>
<meta charset = "UTF-8">
<title></title>
<link rel="stylesheet" href="../css/plantilla_gral.css">
<script src = "../js/jquery-3.2.1.min.js"></script>
<script src = "../js/marcas.js"></script>
</head>
<body>
<div class="contenedor">
<form method= "post" class = "form-registro">
<h2>Registrar nueva moto</h2>
<div class ="contenedor-input">
<input type = "text" id = "placa" name = "placa" placeholder = "Ingresar placa" class = "input-100" required />
<select name="marca" id="marca" class="input-100"></select>
<select name="linea" id="linea" class="input-100"></select>
<input type = "text" id = "modelo" name = "modelo" placeholder = "Ingrese modelo moto" class = "input-48"/>
<select name="color" id="color" class="input-48"></select>
<input type = "text" id = "municipio" name = "municipio" placeholder = "Municipio de la matricula" class = "input-100"/>
<select name = "estado id = "estado" class = "input-100">
<option value = 0> Escoga un estado del RUNT</option>
<option value = "Activo">Activo</option>
<option value = "Inactivo">Inactivo</option>
<option value = "No registra">No registra</option>
<input type = "date" id = "soat" name = "soat" class = "input-48" alt="Ingresar fecha vencimiento del SOAT" />
<input type = "date" id = "tecno" name = "tecno" class = "input-48"/>
<input type="submit" class = "btn-enviar" id = "btn-enviar"/>
</div>
</form>
</div>
</body>
</html>
Como pueden ver el código la función validar es la que se encarga de corroborar si están llenos o no los input, trate de hacerlo con un switch, pero me doy cuenta que al cargar la ventana mandaría el parámetro a la función, pero siempre quedaría con la ultimo opción, como hago esto de manera que en cualquier momento me lo valide.
placa
esrequired
. Si agregasrequired
a los demas inputs, tu codigo funciona.