Puedes lograr lo que te propones usando el método setCustomValidity()
de la API de Restricciones de HTML5.
PROBLEMA
Se desea validar 2 elementos input
de tal manera que el valor (numérico) introducido en uno de los elementos sea siempre menor que el valor (numérico) introducido en el segundo elemento.
SOLUCIÓN
Para resolver el problema, debemos decidir en qué momento realizar la validación. Podemos validar al momento de enviar el formulario cuando se hace clic en el botón de submit
, o podemos validar al momento de escribir los valores en cada uno de los elementos.
Mi recomendación es hacerlo al momento de hacer clic en el botón de submit
. Ya que esto nos dará mayor flexibilidad y además nos evita lidiar con el caso en que se está introduciendo un valor en el campo 1 y aún no se ha introducido ningún valor en el campo 2, o viceversa.
También debemos decidir sobre qué campo se pondrá la restricción, ya que no podemos ponerla sobre ambos (es mala práctica de diseño).
Una forma de implementar lo anterior sería la siguiente:
button.addEventListener('click', (event) => {
const one = document.getElementById('one');
const two = document.getElementById('two');
//Se asume que los valores son numéricos, se puede escribir una validación previa
if(Number.parseFloat(two.value) <= Number.parseFloat(one.value)) {
// la validación se hace sobre el campo 'two', pensando que es el orden lógico de llenado del formulario
event.preventDefault(); // <= se previene la acción del botón
//Se muestra mensaje de validación personalizado usando la API de HTML5
two.setCustomValidity(`El número ingresado es menor o igual que ${one.value}`);
} else {
one.setCustomValidity(''); // <= Un string vacío indica que se ha pasado la validación
}
});
Como puedes ver, es sencillo usar o implementar mensajes de validación personalizados, lo que debes tener en cuenta es el orden en que deseas validar los campos. Un buen diseño mantiene la coherencia entre los eventos y las acciones del usuario.
Un ejemplo funcional de lo anterior podría ser lo siguiente:
const button = document.getElementById('button');
const one = document.getElementById('one');
const two = document.getElementById('two');
button.addEventListener('click', (event) => {
//se asume que los valores de los elementos input son numéricos
if(Number.parseFloat(two.value) <= Number.parseFloat(one.value)) {
event.preventDefault();
two.setCustomValidity(`El número ingresado es menor o igual que ${one.value}`);
} else {
event.preventDefault(); // <= comentar o eliminar si deseamos realizar el submit
one.setCustomValidity('');
alert('Validación correcta'); // <= comentar o eliminar si no deseamos el alerta
}
});
<form class="validate" id="validateForm" action="#" method="post">
<label for="one">Primero:</label><br>
<input type="text" name="one" id="one" placeholder="Número menor" required><br>
<label for="two">Segundo:</label><br>
<input type="text" name="two" id="two" placeholder="Número mayor" required><br>
<button type="submit" name="button" id="button" style="margin-top: 0.5rem;">Enviar</button>
</form>
Si introduces un número menor en el segundo input
y haces clic en el botón, se resaltará el elemento en rojo como inválido, usando los estilos proporcionados por el navegador. Si pasas el puntero del ratón sobre el elemento input
no válido, verás el mensaje de validación personalizado.
Espero que sea lo que estabas buscando. Hay muchas formas de realizar la validación, todo va a depender de la lógica que desees aplicar y de lo complejo que sea tu formulario.
Puedes crear una validación personalizada para el evento onblur
del elemento input
, sin embargo, debes tomar en cuenta el caso en que el otro elemento input
aún no tenga un valor y si lo tiene, que el mismo sea un valor numérico válido.
oninvalid
así como el problema específico que tienes sobre esto o donde te has quedado atorado.