如何 lock/unlock 根据正确性提交表单？

Question

我有这样的模态形式

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

我在比较 startDate 和 endDate 的 js 脚本中添加了验证。当 endDate 在 startDate 之前时，我想显示有关此的警报消息并锁定提交。当我给出正确的结束日期时，我想更新结束日期变量并显示警报成功并解锁提交。

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

问题是如何让我的函数看到这个更正后的结束日期值？以及如何 lock/unlock 根据表单正确性的情况提交？

提前感谢您的帮助

Answer 1

您的代码几乎可以为所欲为，只是您需要检查其中一个输入值发生变化时的日期。我已经使用您的代码实现了以下代码片段。是您要找的吗？

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>

如何 lock/unlock 根据正确性提交表单？

How to lock/unlock submit form depending its correctness?

html

javascript

bootstrap-4