0

estoy realizando unas validaciones en inputs, el input en cuestion debe aceptar solo números y espacios. Encontre el atributo pattern que ya me ayuda bastante pero solo consigo que acepte números y no espacios. ¿Hay alguna forma de solucionarlo sin necesitar js? A continuación dejo el codigo:

 Identificacion de baldes usados:<input type="text" id="baldes" placeholder="(Codigo separado sin comas)" class="form-control" autocomplete="off" pattern = [0-9]+ required>

Se supone que la caja de texto del input debería quedar asi y poder enviarse de esa forma

Se supone que la caja de texto del input debería quedar asi y poder enviarse de esa forma

2 respuestas 2

1

Encontré la repuesta, para agregar un espacio en blanco el codigo es \s

El código completo de mi input quedaría de la siguiente forma:

Identificacion de baldes usados:<input type="text" id="baldes" placeholder="(Codigo separado sin comas)" class="form-control" autocomplete="off" pattern = [0-9\s]+ required>
2
  • Creo que esa expresión esta mal [revisa aqui](javascripter.net/faq/… debería ser: \s
    – user128299
    Commented el 2 nov. 2020 a las 3:34
  • 1
    Si solamente te interesan espacios pattern="[0-9 ]+" ... \s acepta además de espacios \n\r\t\f (un tab por ejemplo)
    – Pollo
    Commented el 2 nov. 2020 a las 23:56
0

Lo puedes hacer de la siguiente manera:

<input
  type="text"
  id="baldes"
  placeholder="(Codigo separado sin comas)"
  class="form-control"
  autocomplete="off"
  pattern="(\d+ ?)+"
  required
>

\d representa cualquier dígito. El + quiere decir que debe aparecer al menos una vez. Después debe estar seguido por 0 o 1 espacios (? es una marca de opcional), y finalmente se indica, con los paréntesis y el +, que ese grupo de caracteres puede aparecer más de una vez.

Así tendrás números entre los que puede aparecer exactamente un espacio (como lo muestras en tu imagen. Nota que tener un espacio al final es válido con este patrón. También es importante que el valor de pattern lo encierres entre comillas, para evitar problemas.

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.