javascript - 防止表单在日期验证时提交

Question

这是我的代码，其中比较两个日期并在跨度 block 中发出警报。
我想检查是否 CheckInDate < 今天 那么，不应提交表单。

$(document.getElementsByName("CheckInDate")).on("change", function () {
    var CheckInDate = $(document.getElementsByName("CheckInDate")).val();
    var today = new Date();
    var dd = today.getDate();
    var c = CheckInDate.split("-");
    var cdd = c[0];
    var cmm = c[1];
    var cyyyy = c[2];
    var mm = today.getMonth()+1; //January is 0!
    var yyyy = today.getFullYear();
    if(dd<10) {
        dd='0'+dd
    } 
    if(mm<10) {
        mm='0'+mm
    } 
    today = dd+'-'+mm+'-'+yyyy;
    if((cyyyy < yyyy) || (cyyyy == yyyy && cmm < mm) || (cyyyy == yyyy && cmm == mm && cdd < dd))
    {
        document.getElementById("DateWarning").innerHTML = "WrongDate";
        /* Form Should not be submitted */
    }
    else
    {
        document.getElementById("DateWarning").innerHTML = "";
    }
});

我想阻止表单提交。我怎样才能做到这一点？

Answer 1

混合 jQuery 和 DOM 等几个问题

您想通过像这样 Hook 提交事件来阻止提交:

$(function() { // on load 
    $("#formId").on("submit", function (e) { // use the form submit event
      var CheckInDate = $("#CheckInDate").val();
      var today = new Date();
      var dd = today.getDate();
      var c = CheckInDate.split("-");
      var cdd = c[0];
      var cmm = c[1];
      var cyyyy = c[2];
      var mm = today.getMonth()+1; //January is 0!
      var yyyy = today.getFullYear();
      if(dd<10) {
          dd='0'+dd
      } 
      if(mm<10) {
          mm='0'+mm
      } 
      today = dd+'-'+mm+'-'+yyyy;
      if((cyyyy < yyyy) || (cyyyy == yyyy && cmm < mm) || (cyyyy == yyyy && cmm == mm && cdd < dd)) {
        $("#DateWarning").html("WrongDate");
        e.preventDefault(); // cancel submission
      }
      else {
        $("#DateWarning").html("")
      }
    });
});

如果您想测试日期字段更改的日期，您需要一个可以重用的函数:

function checkDate() {
  var CheckInDate = $("#CheckInDate").val();
  var today = new Date();
  var dd = today.getDate();
  var c = CheckInDate.split("-");
  var cdd = c[0];
  var cmm = c[1];
  var cyyyy = c[2];
  var mm = today.getMonth()+1; //January is 0!
  var yyyy = today.getFullYear();
  if(dd<10) {
      dd='0'+dd
  } 
  if(mm<10) {
      mm='0'+mm
  } 
  today = dd+'-'+mm+'-'+yyyy;
  if((cyyyy < yyyy) || (cyyyy == yyyy && cmm < mm) || (cyyyy == yyyy && cmm == mm && cdd < dd)) {
    $("#DateWarning").html("WrongDate");
    return false;
  }
  else {
    $("#DateWarning").html("");
    return true;
  }
}
$(function() {
  $("#formId").on("submit", function (e) { // use the form submit event
    if (!checkDate()) e.preventDefault();
  });     
});