¡Hola Graciela!
Entiendo que estás teniendo un problema con la validación de un campo de tipo texto en tu formulario. Según el código que compartiste, estás utilizando el atributo type="tel" en el campo de número telefónico.
El atributo type="tel" se utiliza para indicar que el campo debe contener un número de teléfono. Sin embargo, esto no impide que se puedan ingresar letras en el campo. La validación del formato del número telefónico debe ser realizada con el atributo pattern="\d{10}", que indica que el campo debe contener exactamente 10 dígitos.
Si estás permitiendo ingresar letras en el campo, puede ser debido a que el navegador que estás utilizando no soporta la validación del tipo de teléfono. En ese caso, te sugiero cambiar el tipo de campo a type="text" y utilizar el atributo pattern para validar el formato del número telefónico.
Aquí te dejo un ejemplo de cómo podrías modificar tu código:
<div class="input-container">
<input
name="phoneNumber"
id="phoneNumber"
class="input"
type="text"
placeholder="Número telefónico"
pattern="\d{10}"
required
minlength="10"
maxlength="10"
data-tipo="numero"
/>
</div>
Con esta modificación, el campo debería permitir únicamente ingresar números y validar que se ingresen exactamente 10 dígitos.
Espero que esta respuesta haya sido de ayuda para resolver tu duda. ¡Si tienes alguna otra pregunta, no dudes en hacerla! ¡Espero haber ayudado y buenos estudios!
Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)
