Question

我有一个php网站，每个页面都包含页眉和页脚。在我的一个页面上，我有一个名为“orderForm”的表单，而onSubmit等于“return（validate（））”。在我的标题中（包含在该页面中）我有一个名为 function validate（）的函数。

我的问题是尝试从我的头文件验证订单表单。我知道当我的验证功能包括：

时，它部分有用

alert("Test");
return false;

当我提交表格时收到提醒。

但是当我尝试这样的事情时：

if (document.orderForm.postcode.value.length < 1) {
    alert("Postcode field cannot be empty.");
    return false;
}

尽管 orderForm 且邮政编码是表单字段的正确名称，但它不会对其进行验证。这是因为我在将表单放在不同的文件中时包含头文件吗？

干杯

Answer 1

如果您想按名称进行测试，则可以执行此操作，假设页面中没有其他onload代码。重点是等待分配验证，直到页面上存在表格。

window.onload=function() {
  document.orderForm.onsubmit=function() {
    if (this.postcode.value.length < 1) {
        alert("Postcode field cannot be empty.");
        return false; //cancel submission
    }
    return true; // allow submission
  }
}

要将preventDefault与我的代码一起使用，您可以尝试

window.onload=function() {
  document.orderForm.onsubmit=function(e) {
    var event=e?e:window.event; 
    if (this.postcode.value.length < 1) {
        alert("Postcode field cannot be empty.");
        event.preventDefault();
    }
  }
}

Answer 2

您需要在表单和输入标记中添加«name»属性。

在这种情况下，您必须确保使用window.onload在页面上加载字段。您可以为表单分配提交事件。在此上下文中，您可以运行脚本来验证您的字段。

您必须使用preventDefault（）阻止表单的默认操作。

这是解决方案：

window.onload = function() {
  var form = document.getElementById("orderForm");
  form.addEventListener("submit", function(e) {
    if (document.orderForm.postcode.value.length < 1) {
      e.preventDefault(); // This prevents the default action to submit the form to the server.
      alert("Postcode field cannot be empty.");
    }
  });
};

<form id="orderForm" name="orderForm">
  <input id="postcode" name="postcode" type="text" />
</form>

使用位于单独标头中的JavaScript验证表单

2 个答案: