Question:
I have a form made in HTML with several controls and a javascript script to validate if they are filled or not, the problem is that I want to validate each one but not make a function for each 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 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>As you can see the code, the validate function is the one in charge of verifying if the inputs are filled or not, I tried to do it with a switch, but I realize that when loading the window it would send the parameter to the function, but it would always end with the last option, how do I do this so that at any time I validate it.
Answer:
You don't need a function, you can do it all in onload . Also the focus functionality is not very user friendly. I would do it like this:
window.onload = function () {
var inputs = document.getElementsByTagName('input');
for (var i=0; i<inputs.length; i++) {
inputs[i].addEventListener('input', function(evt) {
this.setCustomValidity('');
});
inputs[i].addEventListener('invalid', function(evt) {
// Required
if (this.validity.valueMissing) {
this.setCustomValidity('Por favor digitar el valor');
this.focus();
}
});
}
}<!DOCTYPE html>
<html lang = "es">
<head>
<meta charset = "UTF-8">
<title></title>
<link 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"/ required>
<select name="color" id="color" class="input-48"></select>
<input type = "text" id = "municipio" name = "municipio" placeholder = "Municipio de la matricula" class = "input-100"/ required>
<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>