Solucionado (ver solución)
Solucionado
(ver solución)
3
respuestas

[Duda] Validación de numero telefónico con "pattern"

Referente al curso JS en la Web: Validación de Formularios y HTML5, en el capítulo Completando el formulario y actividad Haga lo que hicimos en aula

por Mario Hernández Ramírez Jiménez
| 93.3k xp | 2 posts

En la clase 02 Completando formulario I de la quinta sección del curso el instructor hace la valiadación del numero telefónico con el siguiente código:

<div class="input-container">
                        <input name="phoneNumber" id="phoneNumber" class="input" type="text"    required pattern="\d{10}" minlength="10" maxlength="10" placeholder="Número telefónico" data-tipo="number">
                        <label class="input-label" for="phoneNumber">Número telefónico</label>
                        <span class="input-message-error">Este campo es requerido</span>
</div>

y funciona, pero en mi proyecto no ya que si me acepta letras, si embargo, si cambio el input a tipo "number" ya no tengo ese tema pero no me respeta ni minlegth ni maxlength, alguno conoce documentación que me pueda ayudar a resolver ese tema, de antemano gracias y saludos

3 respuestas
solución!
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Mario!

Entiendo tu duda sobre la validación del número telefónico en tu proyecto. Parece que estás teniendo problemas con las letras que se aceptan en el campo de entrada.

Una posible solución sería utilizar una expresión regular más específica en el atributo "pattern" del input. En lugar de solo "\d{10}", podrías utilizar algo como "^[0-9]{10}$". Esto asegurará que solo se acepten números de 10 dígitos y no se permitan letras.

Aquí tienes el código actualizado:

<div class="input-container">
    <input name="phoneNumber" id="phoneNumber" class="input" type="text" required pattern="^[0-9]{10}$" minlength="10" maxlength="10" placeholder="Número telefónico" data-tipo="number">
    <label class="input-label" for="phoneNumber">Número telefónico</label>
    <span class="input-message-error">Este campo es requerido</span>
</div>

Con respecto al cambio del tipo de input a "number", es importante tener en cuenta que los atributos "minlength" y "maxlength" no se aplican a los inputs de tipo "number". Esto se debe a que estos atributos están diseñados para inputs de texto, donde se cuenta la longitud de los caracteres. En el caso de los números, se utiliza el rango de valores permitidos.

Espero que esta información te sea útil para resolver tu problema. Si tienes alguna otra pregunta, no dudes en preguntar.

¡Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
por Matias Afonso Estanqueiro
| 92.1k xp | 4 posts
Analista Funcional IT

Mario, buenas tardes. Tené en cuenta que la validación no impide que el usuario ingrese letras. Lo que hace es verificar que lo ya ingresado por el usuario se corresponda con el patrón (pattern) definido. Espero te ayude esta información. Saludo!.-

por LUIS MIGUEL VASQUEZ ALVAREZ
| 124.9k xp | 7 posts
Diseñador mecánico

muy bien