0

Estoy intentando crear una reglas básicas para que los usuarios no creen datos incorrectos en ciertos campos.

Partiendo del codigo:

HTML

<input id="tel_contacto" name="tel_contacto" class="element text medium" type="text" maxlength="9" minlength="9" style="border-radius:20px;" required="">

He conseguido mediante este código que solo me permita números, pero solo me permite la introduccion de un solo punto:

HTML + JavaScript

<input  id="tel_contacto" name="tel_contacto" class="element text medium" type="text" maxlength="9" minlength="9" style="border-radius:20px;" required="" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');">

Ademas, el campo minlength a dejado de funcionar permitiendo la introducción de datos menores de 9 caracteres.

2
  • también podrías utilizar <input type="number"> Commented el 30 abr. 2019 a las 14:38
  • Lo he estado probando pero no me convence demasiado, parece que number esta mas enfocado a un rango mas que a un dato. Commented el 30 abr. 2019 a las 14:43

3 respuestas 3

4

Creo que la expresión que buscas es: /^[0-9.]+$/ el signo + te permite una o más ocurrencias.

function securePhoneNumber(el) {
  const regex = /^[0-9.]+$/
  if (!regex.test(el.value)) {
    el.value = el.value.substring(0, el.value.length - 1)
  }
}
<input id="tel_contacto" name="tel_contacto" class="element text medium" type="text" maxlength="9" minlength="9" required="" oninput="securePhoneNumber(this)" placeholder="Número de teléfono">

2

Es necesario que leas un poco de documentación para que entiendas los conceptos básicos(html5). Si le das a maxlength y minlength los mismos valores podrías tener problemas mas adelante debido a que cada navegador interpretaría esto diferente. Lo ideal es que uses expresiones regulares. En html existe un atributo llamado pattern, el mismo que te permitirá agregar validaciones a tus formularios. Te dejo un ejemplo de validación en el que solo se deben ingresar 3 caracteres alfanuméricos:

<form action="/action_page.php">
  Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
  <input type="submit">
</form>
0

Saludos te dejare una función muy útil que me ayudado en varias ocasiones:

function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

Dicha función permite aplicar cualquier filtro a un input tipo texto esta maneja tambien los eventos Copiar, Pegar, Arrastrar y Soltar entre otros eventos lo cual te permite tener un mejor control sobre el input con el filtro correspondiente.

Ahora bien el filtro que admitirá solo números enteros será:

setInputFilter(document.getElementById("mi_input"), function(value) {
  return /^\d*$/.test(value);
});

Numeros Enteros y con un limite(500):

/^\d*$/.test(value) && (value === "" || parseInt(value) <= 500)

Bien ahora para verlo en acción:

function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}//end function setInputFilter

//aplicando el filtro
setInputFilter(document.getElementById("input"), function(value) {
  return /^\d*$/.test(value);
});
<input type="text" id="input" name="input">

Bien espero te sirva y suerte.

si deseas mas validaciones te dejare los siguientes enlaces:

JavaScript Validacion

Html numeric Input

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.