0

Buenas noches no soy muy avanzado programando pero tengo un formulario con varios campos, lo que necesito es validar que solo se ingresen números o letras según el campo, pero que limpie el campo donde se fallo después de validar.

los campos estan asi:

 <input class="cajas" type="text" name="username" maxlength="10"
               onblur="return validanumero(this.value)" required title="Solo 
 numeros">

y la validación la realizo por medio de una función:

function validanumero(numero){
if (!/^([0-9])*$/.test(numero)){
    alert("Ingrese solo numeros");        
}
}

el form tiene varios campos y están en archivos php diferentes.

Agradezco la ayuda

3 respuestas 3

2

No necesitas complicarte con librerías para estas validaciones tan sencillas, lo único que debes hacer es enviar a tus funciones de validación el elemento como tal (this) luego en la función podrás manipular su value y hacer tu lógica sin ningún problema.

Como dato adicional te aconsejaría mejor utilizar el evento onchange que es el evento que se dispara cuando se detecta un cambio en el valor del input.

Te dejo el ejemplo funcional

function validanumero(elemento){
  if (!/^([0-9])*$/.test(elemento.value)){
      alert("Ingrese solo numeros");
      elemento.value = '';
  }
}

function validatexto(elemento){
  if (!/^([a-zA-Zá-ú])*$/.test(elemento.value)){
      alert("Ingrese solo numeros");
      elemento.value = '';
  }
}
<label>Solo números:</label>
<input class="cajas" type="text" name="username" maxlength="10" onchange="return validanumero(this)" required title="Solo 
 numeros">
 
 <br><br>
 
 <label>Solo letras:</label>
 <input class="cajas" type="text" name="username" maxlength="10" onchange="return validatexto(this)" required title="Solo 
 numeros">

1
  • perfecto.... muchas gracias funciono correctamente Commented el 20 dic. 2017 a las 15:09
0

Para esa funcionalidad y si eres nuevo puedes usar una librería muy buena jQuery-Mask-Plugin con ella puedes validar y hacer mascaras para que no se pueda ingresar en este caso solo números o lo contrario solo letras hasta podemos validar el ingreso de caracteres especiales.

Para el ejemplo en la libreria le pasamos dentro de pattern una Expresion Regular con lo que necesitas te dejo ejemplo de solo numero y letras.

Ejemplo Funcional

$("#inputSoloNumeros").mask('ZZ',{translation:  {'Z': {pattern: /[0-9\s]/, recursive: true}}});

$("#inputSoloLetras").mask('ZZ',{translation:  {'Z': {pattern: /[áéíóúñüàèa-zA-Z\s]/, recursive: true}}});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.13/jquery.mask.min.js"></script>
<label for="">Solo Numeros</label>
  <input id="inputSoloNumeros" type="text" name="" value="">
  <br>
  <br>
  <label for="">Solo Letras</label>
  <input id="inputSoloLetras" type="text" name="" value="">

0

Puedes poner un id al input en el html para así poder manejarlo y manipularlo desde JavaScript.

Después de asignarle un id, guardas en una variable el input, con el método getElementById(), que es básico para el manejo del DOM, en el cual pasas el id que has asignado en el html. De esta manera, ya puedes manejar el input desde JavaScript con diferentes métodos y funciones.

Por último, los objetos de tipo input tiene la propiedad value que representa su valor. Para limpiar el campo puedes pasarle un valor vacío, y el texto del input se borrará. La sintaxis sería elementoInput.value = ''

Te dejo algunos enlaces para que puedas investigar más sobre estos temas;

Introducción a la manipulación del DOM

getElementById()

Elemento input y atributos

Y el código que resolvería tu problema, tal y como lo he comentado anteriormente, es el siguiente;

var input = document.getElementById('input_js');

function validanumero(numero){
  if (!/^([0-9])*$/.test(numero)){
    alert("Ingrese solo numeros");
    input.value = '';
  }
}
 <input id="input_js" class="cajas" type="text" name="username" maxlength="10"
               onblur="return validanumero(this.value)" required title="Solo 
 numeros">

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.