阻止表单提交日期验证

Question

这是我的代码，其中将两个日期进行比较，并在span块中发出警报。
我想检查今天是否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之类的几个问题

您想要通过钩住提交事件来阻止提交，如下所示：

$(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();
  });     
});     

Answer 2

在onsubmit事件中应避免提交表单：

$('#my-form').submit(function(e) {
   if(preventCondition)
      e.preventDefault();
});

因此，此时您需要检查表单是否有效。 您可以很好地在该字段的onchange上执行检查，以提供客户反馈，但是您应该在提交表单时重新验证，或者让验证设置一个标记，供以后检查。