Dado el siguiente código de JavaScript, cuando lo ejecuto en firefox, me funciona perfectamente, pero en Chrome, los apartados del formulario no se ponen de color rojo cuando escribo las contraseñas y éstas no coinciden... Alguien sabe como afrontar las incompatibilidades de código entre ambos navegadores?
Gracias
'use strict'
let pass1, pass2, fechaInicio, fechaActual, fechaIni, enviar, registro
function iniciar(){
pass1 = document.getElementsByName('password1')[0];
pass2 = document.getElementsByName('password2')[0];
fechaInicio = document.getElementsByName('fechaInicio')[0];
enviar = document.getElementsByName('enviar')[0];
registro = document.getElementById('form');
pass1.addEventListener('input', validarPass, false);
pass2.addEventListener('input', validarPass, false);
registro.addEventListener('invalid', accionInvalid, true);
enviar.addEventListener('click', validarRegistro, false);
}
function validarPass(){
if (pass1.value != pass2.value){
pass2.setCustomValidity("Las contraseñas deben coincidir");
}
else {
pass2.setCustomValidity("");
}
}
function comprobarFecha(){
fechaActual = new Date();
fechaIni = fechaInicio.valueAsDate;
if (fechaIni < fechaActual){
fechaInicio.setCustomValidity("La fecha introducida es menor a la actual");
}
else {
fechaInicio.setCustomValidity("");
}
}
function accionInvalid(evento){
let elemento = evento.target;
elemento.style.background = 'yellow';
}
function validarRegistro(){
comprobarFecha();
if (registro.checkValidity()){
registro.submit();
}
}
window.addEventListener('load', iniciar, false);
<form id="form">
<input name="password1"/>
<input name="password2"/>
<input name="fechaInicio" type="date" />
<button name="enviar">Enviar</button>
</form>