Validate several input with a single function

Navigation
3

I have a form made in HTML with several controls and a script in javascript to validate if they are full or not, the problem is that I want to validate each one but not to do 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 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>

As you can see the code the validate function is the one that is in charge of corroborating if the input is full or not, try to do it with a switch, but I realize that when loading the window I would send the parameter to the function, but I would always have the last option, as I do this so that I can validate it at any time.

    
asked by Familia Valencia Hdz 09.08.2018 в 20:26
source

2 answers

2

You do not need a function, you can do everything in the onload . In addition, 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 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"/ 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>
    
answered by 09.08.2018 / 20:56
source
2

Hello I hope to be of help.

First the inpu and select it would place it inside a form and every time the form changes it is validated.

One thing if you do not want basics just to put required input to validate it without need of jquery or other validation 

<input type="text" name="fname" required>

I'll give you an example

link

greetings

    
answered by 09.08.2018 в 21:03
how to use a href on a label other than (a) List within a for in