Restrict live an input field comparing it to another field-CodePudding

I have a php page and these two inputs fields. My goal is to check if the second input is equal to first input (live) and make an error msg. The code i have so far is this:

<div  id="timepicker1"              
    data-target-input="nearest">

    <input type="text"     
    
    data-target="#timepicker1"

    name="FirstDate" id="FirstDate"  />

</div>
<div  id="timepicker2"  
                                                                
    data-target-input="nearest">
    <input type="text" onclick="CheckForErrors()"

    
    data-target="#timepicker2"

    name="SecondDate" id="SecondDate"  />

</div>

In the end of the php i have a Javascript checking:

<script type="text/javascript">
    function CheckForErrors() {
      // Check if First Time is equal with second Time
      if (FirstDate == SecondDate) {
        alert("Error MSG!");
      }
      return false;
    }
</script>

Its not working, as u understand. Any help ? PS. I'm a begginer so please be patient :D

CodePudding user response：

I changed a little bit your code. First i remove the Tag inline assign of an eventListener (bad practice). Then i check on every keyup the fields. It works on both directions. Means if you start typing in the second field, it will check immediately with field one. and vice versa.

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  id="timepicker1"      
    data-target-input="nearest">
    <input type="text" 
    
    data-target="#timepicker1"
    name="FirstDate" id="FirstDate"  />
</div>

<div  id="timepicker2"                                                                  
    data-target-input="nearest">
    <input type="text"
    
    data-target="#timepicker2"

    name="SecondDate" id="SecondDate"  />

</div>

</div>

CodePudding user response：

You can get input values by document.querySelector({selector}).value . So your code should be:

<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>

Also you are doing your check and if its true you display error message. But your function always returns false. Add return true inside your check to stop further execution.