Question

我的问题是我的表单<form name="enrollment" method="post" action="submit.php">不会提交。我的提交按钮如下：<input class="buttons" type="submit" name="submit" onclick="return validate()" value="Submit" />。

它称之为JavaScript函数：

// Returns true if there are no errors and false if there are errors
function validate() {
  // Something is not returning true here so that the form is not being submitted
  if ( !window.err_exist ) {
    // No errors
    return true;
  }
  // There are errors
  alert("Errors exist in the form!");
  return false;
}

变量window.err_exist在函数getReviewValues()中定义。在getReviewValues()中，我设置了window.err_exist = false;。然后，我使用表单的条件验证表单：

// Name
var r_string = "Name: ";

if ( document.forms["enrollment"]["name"].value.trim() == "" ) {
    r_string += "<span class=\"error\">This is a required field!</span>";
    window.err_exist = true;
} else {
    r_string += document.forms["enrollment"]["name"].value;
}

然后，在getReviewValues()的末尾，我return r_string;获取有关表单验证状态的动态反馈。也就是说，"Name: This is a required field!"等消息。

现在，如果我填写表单但留下一些空白以便我有验证错误，我会收到警告"Errors exist in the form!"并且表单不会提交。大！但是，当我填写表单以便我没有验证错误时，我不获取错误消息。大！但是，哦不！表格仍然没有提交。它应该！

因此，由于我没有收到错误消息，因此执行路径必须位于条件if ( !window.err_exist )中。我可以看到这个，因为函数然后返回true，以便函数永远不会发送消息。但是，如果它返回true，那么我的表单应该提交。所以它必须返回false，因为表单没有提交。但是如果它返回false，则执行路径不能处于假定的条件中。如果是这种情况，那么我会得到消息，但我没有收到消息。这是一个矛盾。

有人有什么想法吗？

Answer 1

而不是＆＃34; onclick＆＃34;提交按钮上的处理程序，使用＆＃34; onsubmit＆＃34;表单元素上的事件。例如：

<form onsubmit="return validate()">

此时，只要您的validate方法正确返回true或false，它就应该按照您的预期行事。

请参阅http://www.w3schools.com/jsref/event_form_onsubmit.asp以获得更好的参考。

Answer 2

当验证成功（window.err_exist！= false）时，脚本返回true。因此，对于点击事件而不是提交，您将返回true。

这可以通过做jeltine所说的<form onsubmit="validate()">来修复，或者可以通过替换

来修复

<input class="buttons" type="submit" name="submit" onclick="return validate()" value="Submit" />

与

<input class="buttons" type="button" name="submit" onclick="validate()" value="Submit" />

然后更改validate函数以在没有错误的情况下调用form.submit();。

实施例

   //must add id to get element by id
    <form name="enrollment" id="enrollment" method="post" action="submit.php">

function validate() {
  // Something is not returning true here so that the form is not being submitted
  if ( !window.err_exist ) {
    // call submit on form
    var myform = document.getElementById("enrollment");
    myform.submit();
  }
  // There are errors
  alert("Errors exist in the form!");
  return false;
}

这样做的好处是，如果需要，您可以更好地控制更改表单参数，例如操作或方法。如果不需要这些，则只需更改为onsubmit=""。

JavaScript：为什么我的表单会提交？

2 个答案: