Question

我是javascript的新手，我面临以下问题：我做了一个简单的日期接受表格，在提交之前检查格式。如果输入的日期不是所需的格式，则显示错误。现在，我使用另一个javascript函数替换表单上的提交按钮。我将其链接到javascript:document.forms[0].submit()。这次，在表单提交期间不调用格式检查功能。它在没有支票的情况下提交。如果有人能告诉我如何克服这个问题，那就太好了。

＆＃13;

function checkDate() {
  var date = document.getElementById("date");
  var dt = date.value;
  var flag = 1;
  var msg = "";
  var errorHere = document.getElementById("spam");
  for (var i = 0; i < dt.length; i++) {
    if (i == 2 || i == 5) {
      if (dt[i] != '-') {
        flag = 0;
        break;
      }
      continue;
    }
    if (dt[i] < '0' || dt[i] > '9') {
      flag = 0;
      break;
    }
  }
  if (dt.length != 10) flag = 0;
  if (dt.length == 0) flag = -1;
  if (flag == 0)
    msg += "Invalid format.";
  else if (flag == -1)
    msg += "Empty field."
  else msg += "OK.";
  errorHere.firstChild.nodeValue = msg;
  if (flag == 1) return true;
  else return false;
}

function submitter() {
  var abc = confirm("Would you like to switch to link?");
  if (abc == true) {
    var i = 0,
      now;
    while (++i) {
      now = document.getElementsByTagName("input")[i];
      if (!now) return;
      if (now.type == "submit") break;
    }
    var latest = document.createElement("a");
    latest.href = "javascript:document.forms[0].submit()";
    var text = document.createTextNode(now.value);
    latest.appendChild(text);
    now.parentNode.replaceChild(latest, now);
  }
}
window.onload = submitter;

＆＃13;

<head>
  <script type="text/javascript" src="date.js">
  </script>
</head>

<body>
  <h1>Date checker</h1>
  <form action="eventssearch.php" method="post" onsubmit="return checkDate();">
    <p>
      <label for="date">Date in the format DD-MM-YYYY:</label>
      <br />
      <input type="text" id="date" name="date" />
      <input type="submit" value="Check" />
      <br />(example 01-01-1970)
      <p id="spam"></p>
    </p>
  </form>
</body>

＆＃13;

...格拉莫西

Answer 1

而不是使用

"javascript:document.forms[0].submit()"

您可以调用自己的函数来调用验证函数，并在表单有效时提交：

`javascript:singleSumbitFunc()`

然后可以将此相同的函数设置为表单的onsubmit函数。

<form action="eventssearch.php" method="post" onsubmit="return singleSubmitFunc()">

示例功能：

function singleSubmitFunc() {
  var form = document.forms[0];

  // here is the where your validation function is called
  // .call() is to set the form as 'this'
  var formIsValid = checkDate.call(form);

  if (formIsValid) {
    form.submit();
  } 

  return false; // this prevents normal submit if called by form
}

您需要执行此操作的原因是因为在代码/链接中使用.submit()时未触发提交事件。此示例中使用的函数将直接调用所需的函数。

onsubmit处理改编自this SO answer

function checkDate() {
  document.getElementById('checkDateFeedBack').innerText = 'checkDate() fired! at ' + new Date().toLocaleString();
  var date = document.getElementById("date");
  var dt = date.value;
  var flag = 1;
  var msg = "";
  var errorHere = document.getElementById("spam");
  for (var i = 0; i < dt.length; i++) {
    if (i == 2 || i == 5) {
      if (dt[i] != '-') {
        flag = 0;
        break;
      }
      continue;
    }
    if (dt[i] < '0' || dt[i] > '9') {
      flag = 0;
      break;
    }
  }
  if (dt.length != 10) flag = 0;
  if (dt.length == 0) flag = -1;
  if (flag == 0)
    msg += "Invalid format.";
  else if (flag == -1)
    msg += "Empty field."
  else msg += "OK.";
  errorHere.innerText = msg;
  if (flag == 1) return true;
  else return false;
}

function singleSubmitFunc(event) {
  var form = document.forms[0];

  // here is the where your validation function is called
  // .call() is to set the form as 'this'
  var formIsValid = checkDate.call(form);
  
  if (formIsValid) {
    form.submit();
    document.getElementById('checkDateFeedBack').innerText = 'Valid form has been submitted!';
  } 
  
  return false; // prevent normal submit if called by form      
}

function submitter() {
  var abc = confirm("Would you like to switch to link?");
  if (abc == true) {
    var i = 0,
      now;
    while (++i) {
      now = document.getElementsByTagName("input")[i];
      if (!now) return;
      if (now.type == "submit") break;
    }
    var latest = document.createElement("a");
    latest.href = "javascript:singleSubmitFunc()"; // calls custom form submit function
    var text = document.createTextNode(now.value);
    latest.appendChild(text);
    now.parentNode.replaceChild(latest, now);
  }
}
window.onload = submitter;

.error {
  color: #c00;
  font-weight: bold;
}

<head>
  <script type="text/javascript" src="date.js">
  </script>
</head>

<body>
  <h1>Date checker</h1>
  <form action="eventssearch.php" method="post" onsubmit="return singleSubmitFunc()">
    <p>
      <label for="date">Date in the format DD-MM-YYYY:</label>
      <br />
      <input type="text" id="date" name="date" />
      <input type="submit" value="Check" />
      <br />(example 01-01-1970)
      <p id="spam"></p>

      <p id="checkDateFeedBack"></p>
    </p>
  </form>
</body>

如何打电话＆＃34; onsubmit＆＃34;当＆＃34; javascript：document.forms [0] .submit（）＆＃34;用来？

1 个答案: