4

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.

3
  • Solo el input placa es required. Si agregas required a los demas inputs, tu codigo funciona.
    – alanfcm
    Commented el 9 ago. 2018 a las 18:45
  • Si funciona, pero me tocaría crear una función por cada input para crear el error personalizado y lo que quiero es con una sola función poderlos validar todos Commented el 9 ago. 2018 a las 18:51
  • Puedes usar esta libreria para validar de forma mas sencilla tus formularios: github.com/dvdeveloper/PHP-Class-Validation Commented el 12 abr. 2020 a las 3:50

2 respuestas 2

3

No necesitas una funcion, puedes hacerlo todo en el onload. Ademas la funcionalidad del focus no es muy amigable para el usuario. Yo lo haria asi:

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>

2

Hola espero ser de ayuda.

Primero los inpu y select lo colocaria dentro de un formulario y cada ves que el formulario cambia se valida.

A una cosa si quieres que no sena basicio solo con colocarle requido al input lo valida sin nesesidad de jquery o otra validacion

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

te dejo un ejemplo

https://codepen.io/DerLeguan/pen/jpXMgP?editors=1000

saludos

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.