2

Tengo 2 campos formados con un elemento input de tipo texto. Estos campos contendran un numero.

El campo 1 debe ser rellenado con un numero que debe ser siempre menor al campo 2.

Por medio de un botón o al cambiar el valor de uno de los 2 campos me sale un alert en el caso que no se cumpla la condición.

Quiero sustituir el alert por un mensaje con el mismo estilo de validación que se usa en Html5 para que aparezca en uno de los 2 campos en el caso de que la condición no se cumpla. El estilo de mensaje debe respetar los mismos estilos de validación que usan los diferentes navegadores.

Aquí tengo un ejemplo para un caso en el que una validación de un campo es invalida:

var input = document.getElementById('campo1');
input.oninvalid = function(event) {
   event.target.setCustomValidity('El campo1 debe ser mayor al campo2');
}

¿ Como aprovechar el oninvalid u otro tipo de evento para relacionar una condición entre 2 campos ?

4
  • Agrega una breve descripción de lo que has buscado/investigado/probado en relación a relacionar una condición entre 2 campos usando oninvalid así como el problema específico que tienes sobre esto o donde te has quedado atorado.
    – Rubén
    Commented el 4 jul. 2019 a las 16:22
  • No se si se puede relacionar oninvalid para comparar 2 campos en vez de uno de ahí mi pregunta. Como decía me gustaría sustituir un mensaje de alert por el tipo de mensaje que sale en un campo al validar. Pero no se como.
    – Popularfan
    Commented el 4 jul. 2019 a las 16:36
  • ¿Acaso estás diciendo que no has buscado, no has investigado ni has intentado nada aún?
    – Rubén
    Commented el 4 jul. 2019 a las 17:36
  • Claro que he investigado creo que debe ser algo relacionado con oninvalid pero todo lo que encuentro es para validar el mismo campo con required. ¿ Tienes alguna idea ?
    – Popularfan
    Commented el 4 jul. 2019 a las 21:20

1 respuesta 1

1

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.

1
  • Muchas gracias, me sirvió la solución que me distes.
    – Popularfan
    Commented el 9 jul. 2019 a las 15:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.