1

Estoy tratando de que se ejecute este error personalizado al teclear pero no me sale

window.onload = function(){
	var cedula = document.getElementById('cedula');
	cedula.oninput = Numeros;
}

function Numeros(){
	var cedula = document.getElementByid('cedula');
	alert("");
	cedula.addEventListener('invalid', function(evt){
		if(this.validity.patternMismatch)
		{
			alert(this.validity.patternMismatch)
			this.setCustomValidity('solo numeros');
		}
	});
	cedula.addEventListener('input', function(evt){
		this.setCustomValidity('');
	});
}
<!DOCTYPE html>
<html lang = "es">
<head>
	<meta charset = "UTF-8">
	<title>Formulario de registro</title>
	<link rel="stylesheet" href="../css/reg.css">
	<script src = "../js/jquery-3.2.1.min.js"></script>
	<script src = "../js/validar1.js"></script>
</head>
<body>
	<h1>Formulario de registro</h1>
	<form  method= "post" class = "form-registro">
		<h2> Crear capitanes</h2>
		<div class ="contenedor-input">
			<input type = "text" pattern = "[0-9]" id = "cedula" name = "cedula" placeholder = "Cedula" class = "input-100" required>
			<input type = "button" value = " Registrar capitan" class = "btn-enviar" id = "btn-enviar">
		</div>		
	</form>
</body>
</html>

La verdad no se que se que estoy haciendo mal, agradezco su ayuda.

3 respuestas 3

1

Tienes los siguientes errores:

  1. En la línea cedula.oninput = Numeros; lo que estas haciendo es asignar al evento input una función que, si la revisas, suscribe mas eventos. Es decir que cada vez que se ingresen valores al input, agregas más y más listeners sobre el input, lo que eventualmente provocara que se "cuelgue" el navegador.

  2. Para que aparezcan los mensajes de error es necesario "Enviar" (eg: submit) el formulario. Es decir que tu <input type="button", en realidad debería ser <input type = "submit".

Solución:

window.onload = function() {
  var cedula = document.getElementById('cedula');
  cedula.oninput = Numeros;
}

function Numeros() {
  if (this.validity.patternMismatch) {
    this.setCustomValidity('solo numeros');
  } else {
    this.setCustomValidity('');
  }
}
<h1>Formulario de registro</h1>
<form method="post" class="form-registro">
  <h2> Crear capitanes</h2>
  <div class="contenedor-input">
    <input type="text" pattern="[0-9]" id="cedula" name="cedula" placeholder="Cedula" class="input-100" required>
    <input type="submit" value=" Registrar capitan" class="btn-enviar" id="btn-enviar">
  </div>
</form>

1
  • Gracias por tu ayuda,e sirvió a la perfección Commented el 1 ene. 2018 a las 21:12
0

no has pensado hacer algo mas facil como esta pequeña validacion con jquery :

$("#button").submit(function () {  
    if($("cedula").val().length < 1) {  
        alert("solo numeros");  
        return false;  
    }  
    return false;  
});  

4
  • Pero es que no quiero usar alert para los errores quiero usar la API para hacer esas validaciones Commented el 1 ene. 2018 a las 3:58
  • cual es la API? su nombre, en la pregunta no dices su nombre, solamente veo que usas jquery y un script llamado validar1 supuse que ese era tu script que estas haciendo
    – simon
    Commented el 1 ene. 2018 a las 4:00
  • Bueno esa API es para validar formularios la verdad no se como se llama Commented el 1 ene. 2018 a las 4:02
  • mmmm ps si no sabes como se llama , comparte el archivo/codigo del script "validar1.js" asi te podre ayudar mejor.
    – simon
    Commented el 1 ene. 2018 a las 4:03
0

Si no entendí mal, lo que quieres hacer es validar que solo sean números los que se ingresen al text al ir escribiendo, yo lo haría así, espero y te sirva: Nota: para validar que un campo sea solo numérico y a la misma vez darle formato, busca el plugin de jquery number format, y así ya no es necesario que muestres ese mensaje de "solo numeros"

$('#cedula').keyup(function(){
   var cedula = $(this).val();
   //lo que quieres que haga aquí
   console.log(cedula);//en la consola te irá imprimiendo lo que vayas escribiendo
});
12
  • yo le conteste igual, pero quiza no se explico bien ella
    – simon
    Commented el 1 ene. 2018 a las 4:01
  • 1
    Y cómo se haría eso con jQuery? Commented el 1 ene. 2018 a las 4:01
  • 1
    Yo no quiero que me muestre un alert cuando digite algo distinto a un número, lo que queiro es que me muestre una mensaje como el que pone cuando uno pone el atributo required Commented el 1 ene. 2018 a las 4:04
  • 1
    estas empezando en jquery?
    – valle50
    Commented el 1 ene. 2018 a las 4:05
  • 1
    Si soy nuevo en jquery Commented el 1 ene. 2018 a las 4:07

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.