Tengo una página php y estos dos campos de entrada. Mi objetivo es verificar si la segunda entrada es igual a la primera entrada (en vivo) y hacer un mensaje de error. El código que tengo hasta ahora es este:
<div class="input-group date" id="timepicker1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#timepicker1" name="FirstDate" id="FirstDate" /> </div> <div class="input-group date" id="timepicker2" data-target-input="nearest"> <input type="text" onclick="CheckForErrors()" class="form-control datetimepicker-input" data-target="#timepicker2" name="SecondDate" id="SecondDate" /> </div>Al final del php tengo una comprobación de Javascript:
<script type="text/javascript"> function CheckForErrors() { // Check if First Time is equal with second Time if (FirstDate == SecondDate) { alert("Error MSG!"); } return false; } </script>No funciona, como entiendes. Alguna ayuda ? PD. Soy un principiante así que ten paciencia :D
Puede obtener valores de entrada mediante document.querySelector({selector}).value . Entonces tu código debería ser:
<script type="text/javascript"> function CheckForErrors() { // Check if First Time is equal with second Time if (document.querySelector("#FirsDate").value == document.querySelector("#SecondDate").value) { alert("Error MSG!"); return true; } return false; } </script>También está haciendo su verificación y, si es cierto, muestra un mensaje de error. Pero su función siempre devuelve falso. Agregue return true dentro de su cheque para detener una mayor ejecución.
Cambié un poco tu código. Primero elimino la asignación en línea de la etiqueta de un eventListener (mala práctica). Luego keyup cada tecla de los campos. Funciona en ambas direcciones. Significa que si comienza a escribir en el segundo campo, se verificará inmediatamente con el campo uno. y viceversa.
box = document.getElementById('doubleChecker'); box.addEventListener('keyup', (e) => { const i1 = document.getElementById('timepicker1').children[0] const i2 = document.getElementById('timepicker2').children[0] console.log(i1.value , i2.value) if (i1.value == i2.value) { alert("Error MSG!"); return false; } }); <div id="doubleChecker"> <div class="input-group date" id="timepicker1" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#timepicker1" name="FirstDate" id="FirstDate" /> </div> <div class="input-group date" id="timepicker2" data-target-input="nearest"> <input type="text" class="form-control datetimepicker-input" data-target="#timepicker2" name="SecondDate" id="SecondDate" /> </div> </div>