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>