1

Buenas tardes chicos,

Necesito de su apoyo, estoy haciendo una página que tiene un formulario y uno de los campos del formulario se nombro "Business Position", no requiere que se valide, pero se nos pide que que usemos el atributo patern y usemos una expresión regular que solo acepte "caracteres alfabéticos, guiones y espacios con un mínimo de siete caracteres".

Yo intente esto:

input type="text" id="business-position" pattern="[a-zA-Z]{7}"

Pero no entiendo que hacer para que acepte tambien guiones y espacios.

Saludos y buena tarde

2
  • Usa secuencia de escape para espacios y guiones: pattern="[a-zA-Z\-\ ]{7}". Allí estoy incluyendo guiones: \- y espacios \ . Usando la barra invertida seguida del carácter que deseo escapar Commented el 14 jul. 2023 a las 21:44
  • Mauricio muchas gracias, es que todavía me falta experiencia en front end y aun siguo aprendiendo. Saludos
    – Muloki
    Commented el 15 jul. 2023 a las 4:27

2 respuestas 2

1

Tienes que los caracteres admitidos son:

  • Alfabéticos: [a-zA-Z]
  • Guion: \-
  • Espacio: \s
  • Y que los caracteres se repitan desde 7 a más veces {7,}

input:valid {
    background-color: palegreen;
}

input:invalid {
    background-color: lightpink;
}
<form onsubmit="event.preventDefault()">
<input type="text" id="business-position" pattern="[a-zA-Z\-\s]{7,}$">

<input type="submit" value="enviar" onsubmit="return false" >
</form>

¿El problema?

El atributo pattern no funciona para los input vacíos, lo que ocasiona que se valide para 0 y 7 o más caracteres Tal como indica la documentación

(traducción automática)

Si el valor de la entrada no es la cadena vacía y el valor no coincide con toda la expresión regular, se produce una infracción de restricción notificada por la propiedad

Entonces, necesitamos usar el atributo required para cumplir todas las condiciones

input:valid {
    background-color: palegreen;
}

input:invalid {
    background-color: lightpink;
}
<form onsubmit="event.preventDefault()">
<input type="text" id="business-position" pattern="[a-zA-Z\-\s]{7,}$" required>

<input type="submit" value="enviar" onsubmit="return false" >
</form>

4
  • Muchas gracias Yussef, es que aún estoy aprendiendo en la escuela front end y en la documentación de mdn no me quedo muy claro esto de las expresiones regulares. Te lo agradezco
    – Muloki
    Commented el 15 jul. 2023 a las 4:26
  • @Muloki Ningún problema estimado, un placer haber podido ayudar con grano de arena. Recuerda marcar la respuesta como aceptada si así te parece. Saludos
    – Yussef
    Commented el 15 jul. 2023 a las 4:45
  • 1
    Y no podría pasar que alguien llene el campo con siete espacios, y luego un middleware decida hacer trim() a los strings que recibe?
    – ffflabs
    Commented el 15 jul. 2023 a las 6:47
  • @ffflabs Yo creo que este problema es más un ejercicio académico que un problema "de la vida real"....que acepte 7 espacios seguidos (o guiones) no tiene sentido, ni en el cliente ni en el servidor.
    – Yussef
    Commented el 17 jul. 2023 a las 19:57
1

El patrón correcto sería así:

<input type="text" id="business-position" pattern="[a-zA-Z0-9\-\s]{7,}$" title="Letras, números, guiones y espacios; con un mínimo de siete caracteres" required>

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.