Tengo un formulario para enviar varios campos. Dos de ellos son para cambiar una contraseña.
No es necesario completar estos campos de contraseña antes de enviarlos. Sin embargo, si uno de ellos se rellena, agrego el atributo 'required' a ambos campos cuando se modifica a través de jQuery. Elimino los atributos cuando vacío uno de los campos y el otro ya se encuentra vacío.
En la mayoría de casos funciona, con una excepción que explico en el siguiente caso de uso:
- Relleno password
- password2 se encuentra vacío
- Envío el formulario
En este caso, la validación para password2 aparece, pero si quiero eliminar todo y enviar de nuevo, no puedo:
- Borro lo que se encuentra en password
- Envío de nuevo el formulario
- La validación para password2 aparece de nuevo. Incluso si el atributo 'required' no aparece en la fuente HTML
¿Por qué me sigue validando ese campo si el 'required' ya está eliminado?
$('#password').change(function() {
if($(this).val() != ''){
$(this).attr('required', true);
$( '#password2' ).attr('required', true);
}else{
if($('#password2').val() == ''){
$(this).removeAttr('required');
$( '#password2' ).removeAttr('required');
}
}
});
$('#password2').change(function() {
if($(this).val() != ''){
$(this).attr('required', true);
$('#password').attr('required', true);
}else{
if($('#password').val() == ''){
$(this).removeAttr('required');
$('#password').removeAttr('required');
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="edicionPerfilForm" action="actor/edit.do" method="post">
<div class="row">
<div class="form-group col-md-4">
<div>
<label for="password">Password</label>
<input id="password" name="password" class="form-control" type="password" value="" oninvalid="this.setCustomValidity('Fill out this field')" oninput="this.setCustomValidity('')">
<br>
</div>
</div>
<div class="form-group col-md-4">
<div>
<label for="password2">Repeat password</label>
<input id="password2" name="password2" class="form-control" type="password" value="" oninvalid="this.setCustomValidity('Fill out this field')" oninput="this.setCustomValidity('')">
</div>
</div>
</div>
<button name="save" type="submit" class="btn btn-dark">Send</button>
</form>