Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Solo funciona en algunos input

Hola,

¿Por qué solo funciona la clase de invalid en el input de nombre, email , contraseña y fecha de vencimiento? Si a través de parentElement estoy accediendo al padre y todos tienen el mismo input-container.

<fieldset>
                    <legend class="form__label">Información básica</legend>
                    <div class="input-container">
                        <input name="name" id="name" class="input" type="text" placeholder="Nombre" required>
                        <label class="input-label" for="name">Nombre</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="email" id="email" class="input" type="email" placeholder="Email" required>
                        <label class="input-label" for="email">Email</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="password" id="password" class="input" type="password" placeholder="Contraseña" required pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?!.*[ !@#$%^&*_=+-]).{6,12}$" title="Al menos 6 caracteres, máximo 12, debe contener una letra minúsculas, una letra mayúsculas, un número y no puede contener caracteres especiales.">
                       <label class="input-label" for="password">Contraseña</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                </fieldset>
                <fieldset>
                    <legend class="form__label">Información personal</legend>
                    <div class="input-container">
                        <input name="birth" id="birth" class="input" type="date" placeholder="Fecha de nacimento" required data-tipo="nacimiento">
                        <label class="input-label" for="birth">Fecha de nacimiento</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="phoneNumber" id="phoneNumber" class="input" type="text" placeholder="Número telefónico">
                        <label class="input-label" for="phoneNumber">Número telefónico</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                </fieldset>
                <fieldset>
                    <legend class="form__label">Dirección</legend>
                    <div class="input-container">
                        <input name="cep" id="cep" class="input" type="text" placeholder="CEP">
                        <label class="input-label" for="cep">Dirección completa</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="city" id="city" class="input" type="text" placeholder="Ciudad">
                        <label class="input-label" for="city">Ciudad</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                    <div class="input-container">
                        <input name="state" id="state" class="input" type="text" placeholder="Estado">
                        <label class="input-label" for="state">Estado</label>
                        <span class="input-message-error">Este campo no es valido</span>
                    </div>
                </fieldset>
1 respuesta

Hola Samanta, espero que estés bien! ¡Muchas gracias por su contribución! ¡Para cualquier duda, estoy disponible! Nos alegra mucho tu entusiamo, te deseamos exito en esta nueva aventura, que puedas sacar el maximo provecho! ¡Vamos juntos! ¡No desanimes! :)

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