I have form in modal like this

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header login-form-2">
              <h5 class="modal-title" id="exampleModalLabel">Okres niestandardowy</h5>
            </div>
            <div class="modal-body" style="color: black;">
              Wybierz okres czasu : 
              <form method = "post" action="/showbalance/show-custom" id="main" novalidate>
                <div class="form-group row"> 
                    <label for="date" class="col-sm-5 control-label mt-3" >Data początkowa: </label>
                    <div class="col-sm-7">
                        <input type="date"  class="form-control" id="startDate" name="startDate" value="startDate">
                    </div>
                    <div class="col-sm-12 messages"></div>
                </div>
                <div class="form-group row"> 
                    <label for="date" class="col-sm-5 control-label mt-3" >Data końcowa: </label>
                    <div class="col-sm-7">
                        <input type="date"  class="form-control" id="endDate" name="endDate" value="endDate">
                    </div>
                    <div class="col-sm-12 messages"></div>
                </div>
                
              
            </div>
            <div class="modal-footer login-form-2 justify-content-center">
                <input type="submit" id="btnSubmit" class="btnSubmit" onclick="checkDate()" value="Wprowadź" />
                <input type="button" class="btnAbort" data-bs-dismiss="modal" value="Anuluj" />
            </div>
        </form>

I added validation in js script comparing startDate and endDate. When endDate is before startDate i want to show alert message about this and lock submit. When I give correct endDate I want to update endDate variable and show alert success and unlock submit.

<script type="text/javascript">
    function checkDate() {
    var dateForm  = document.forms['main'];
    var startDate = document.getElementById("startDate").value;
    var endDate = document.getElementById("endDate").value;
    if (startDate >= endDate) {
        
        document.getElementById("btnSubmit").disabled=true;
        alert("End Date cannot occur before the Start Date!");

    } else {
        
        document.getElementById("btnSubmit").disabled=false;
        alert("Success!");
    }
  }
</script>

The question is how to make my function seeing this corrected endDate value ? And how to lock/unlock submit depending of situation of form correctness ?

Thank you in advance for help

CodePudding user response：

Your code is doing almost whatever you want, just you need to check date when one of inputs` value has changed. I've implemented below snippet by using your code. Is it what you were looking for?

let startDateInp = document.getElementById('startDate');
let endDateInp = document.getElementById('endDate');

startDateInp.addEventListener('change', checkDate);
endDateInp.addEventListener('change', checkDate);

function checkDate() {
  let startDate = startDateInp.valueAsDate;
  let endDate = endDateInp.valueAsDate;

  if (!endDate || !startDate) {
    // do nothing
    return;
  }

  if (startDate >= endDate) {
    document.getElementById("btnSubmit").disabled = true;
    alert("End Date cannot occur before the Start Date!");
  } else {
    document.getElementById("btnSubmit").disabled = false;
    alert("Success!");
  }
}

<div class="modal-body" style="color: black;">
  Wybierz okres czasu :
  <form method="post" action="/showbalance/show-custom" id="main" novalidate>
    <div class="form-group row">
      <label for="date" class="col-sm-5 control-label mt-3">Data początkowa:(startDate)</label>
      <div class="col-sm-7">
        <input type="date" class="form-control" id="startDate" name="startDate" value="startDate">
      </div>
      <div class="col-sm-12 messages"></div>
    </div>
    <div class="form-group row">
      <label for="date" class="col-sm-5 control-label mt-3">Data końcowa: (endDate)</label>
      <div class="col-sm-7">
        <input type="date" class="form-control" id="endDate" name="endDate" value="endDate">
      </div>
      <div class="col-sm-12 messages"></div>
    </div>
</div>
<div class="modal-footer login-form-2 justify-content-center">
  <input type="submit" id="btnSubmit" class="btnSubmit" onclick="checkDate()" value="Wprowadź (submit)" disabled/>
  <input type="button" class="btnAbort" data-bs-dismiss="modal" value="Anuluj" />
</div>
</form>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>