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

[Duda] AYUDA . problema con **input type =

Hola chicos, AYUDA tengo una duda, al colocar letras en el input type = "tel" al enviar el formulario me recibe los letras y lo deja enviar sin problema y no me marca que es obligatorio que sean numeros lo que se tiene que ingresar. El resto de los items si se comportan bien con el required

este es mi codigo:

Nombre y Apellido
            <label for="correoelectronico">Correo Electronico</label>
            <input type="email" id="correoelectronico" class="input-padron" required placeholder="email@dominio.com">

            <label for="telefono">Teléfono</label>
            <input type="tel" id="telefono" class="input-padron" required placeholder="(57) XXX XXX XXXX">

            <label for="mensaje">Mensaje</label>
            <textarea cols="72" rows="10" id="mensaje" class="input-padron" required></textarea>

            <div>
                
             <p class="como-le-gustaria">¿Cómo le gustaria que lo contactemos?</p>
             
             <label for="radio-email"><input type="radio" name="contacto" value="email" id="radio-email">Email</label>
             
             <label for="radio-telefono"><input type="radio" name="contacto" value="telefono" id="radio-telefono">Teléfono</label>
             
             <label for="radio-whatsapp"><input type="radio" name="contacto" value="whatsapp" id="radio-whatsapp">WhatsApp</label>
                                                           
            </div>

            <div>
                <p class="horario-atencion">¿En cúal horario prefiere ser atendido?</p>
                <select>
                    <option>Mañana</option>
                    <option>Tarde</option>
                    <option>Noche</option> 
                </select>
            </div>
                           
            <label class="checkbox"><input type="checkbox">¿Le gustaría recibir novedades de la Barbería Alura?</label>
            
            <input type="submit" value="Enviar formulario"> 

        </form>
    </main>
3 respuestas
solución!

¡Hola Álvaro!

Una posible solución para esto es utilizar la validación de HTML5 para asegurarte de que solo se ingresen números en el campo de teléfono. Puedes hacerlo agregando el atributo "pattern" al campo de entrada de teléfono y especificando una expresión regular que solo permita números. Por ejemplo:

<input type="tel" id="telefono" class="input-padron" required placeholder="(57) XXX XXX XXXX" pattern="[0-9]{10}">

En el ejemplo anterior, el atributo "pattern" tiene el valor "[0-9]{10}", lo que significa que solo se permiten 10 dígitos numéricos en el campo de teléfono.

Con esta configuración, si intentas enviar el formulario con letras en el campo de teléfono, recibirás un mensaje de error indicando que solo se permiten números.

¡Saludos!

Si este post te ayudó, por favor marca como solucionado ✓. ¡Continúa con tus estudios!

Muchas gracias Bruno, efectiva tu ayuda, solucionado el problema.

muchas gracias por el consejo a mi si me funciono pero eso de que solo acepte numero me parece buena opción.