Question

我有一个我要提交的表单，所以当我点击提交时，它会转到selectorpage.php并找到所选的功能类型，例如在此登录，进一步调用控制器执行该功能。我遇到的问题是在js中有一个名为validateForm（）的函数，只要我单击提交按钮，它就会转到selectorPage.php。我想停止表单提交，通过js执行验证然后从那里提交表单，我使用onsubmit = return false;在表单标签中，它只是阻止进一步做任何事情的形式。如果它以某种方式在js中工作，我也不知道如何将表单重定向到selectorPage。所以任何人都想知道如何从js提交表单然后将该页面重定向到selectorPage.php。感谢

<form method="post" action="selector.php?type=login" id="login" id="loginForm">
      <div class="row">
           <div class="offset1 span1">            
                <div class="lbel">
                     <label class="control-label" for "loginName">
                          Username/Email
                     </label>
                </div>
                <div class="lbl_inpuCnt">
                      <input type="text" class="input-xlarge" id="loginName"
                             name="loginName" maxlength="50"/>
                </div>
                <div id="usernameError">&nbsp;</div>
                <div class="lbel">
                      <label class="control-label" for="loginPassword">
                             Password
                      </label>
                </div>
                <div class="controls">
                       <input type="password" class="input-xlarge" 
                               id="loginPassword" name="loginPassword" 
                                maxlength="50"/>
                </div>
                <div id="passwordError">&nbsp;</div><br/>
            </div>
       </div>
       <div style="margin-left: 55px;">
           <input class="btn" style="width: 80px;" type="reset" 
                    name="reset" value="Reset"/>
           <input class="btn" style="width: 80px;" type="submit" 
                    name="submit" value="Login" onclick="validateForm();"/>
       </div>
 </form>

根据上面的代码，这是javascript

function validateForm(){
    form = document.forms['loginForm'];
    if(document.getElementById('loginName').value == "")
        document.getElementById('usernameError').innerHTML = 'Invalid username or email';
    else{
        document.getElementById('usernameError').innerHTML = "&nbsp";      
    form.submit();
    }
} //suppose it for the email validation only for the time being

Answer 1

你可以尝试

<form ... onsubmit="return validateForm();"

在validateForm()函数中使用

return true / false

取决于是否找到错误。

Answer 2

以下是使用内联事件处理的规范方法 - 进一步了解如何使其不引人注目。在表单标记上也只有一个id，也永远不会在表单中调用任何submit它是一个保留字，并将阻止脚本提交（这是你试图做的）

<form id="loginform" ... onsubmit="return validate(this)">

<div style="margin-left: 55px;">
  <input class="btn" style="width: 80px;" type="reset" name="reset" value="Reset" onclick="clearFields()"/>
  <input class="btn" style="width: 80px;" type="submit"  value="Login" />
</div>
</form>

这是javascript

function validateForm(form){ // passing form object
  document.getElementById('usernameError').innerHTML = ""; // reset

  if (form.loginName.value == "") {
    document.getElementById('usernameError').innerHTML = "Invalid username";
    return false;
  }
  return true;// allow submission
}

替代

<form id="loginform" ..... No event handler here ...>

脚本：

window.onload=function() {
  document.getElementById("loginform").onsubmit=function() {
    document.getElementById('usernameError').innerHTML = ""; // reset

    if (this.loginName.value == "") { // notice the "this"
      document.getElementById('usernameError').innerHTML = "Invalid username";
      return false;
    }
    return true;// allow submission
  }
}

Answer 3

我过去曾经遇到类似的问题。

当您单击表单的“登录”按钮时，您将触发两个单独的事件 - 调用'validateForm（）;' javascript函数，以及表单本身的提交。这里的问题是，提交表单涉及浏览器将出站请求发送回表单目标，据我所知，一旦触发请求事件，就无法使用javascript终止请求事件。

使用'onsubmit = return false;'可能正在完成它应该做的事情 - 退出当前的javascript范围（因此阻止与该特定事件相关的进一步javascript执行）。但是，遗憾的是，表单本身的提交虽然可以通过javascript触发和控制，但实际上并不是由javascript处理的，并且本身不是javascript函数。

根据我的经验，我发现最好的解决方案是使用“按钮”类型输入而不是“提交”类型输入 - “提交”和“按钮”都显示为按钮，但是'button'实际上没有任何默认的固有关联事件动作（因此，当你点击它时实际上什么都不做） - 这意味着，通过事件处理程序（例如'onclick'，就像你'一样）已完成），您可以完全控制用户点击“按钮”时发生的情况。

您尚未包含'validateForm（）;' javascript函数在这里，所以我不知道它包含什么，但是，如果它还没有这样做，我将包含代码通过该javascript函数提交表单，一旦验证成功（或返回）提交表单如果验证失败，会出现某种人类可读的错误） - 结合使用“按钮”代替“提交”可以解决您的问题。

希望这会有所帮助。：）

编辑：在做出初步回复后不久就想到了这一点。有些浏览器会在通过提交输入类型提交表单之前处理事件处理程序，例如“onclick”;但是，我发现某些旧的浏览器目前没有这样做（因此我的上述帖子的上下文）。对于表示在表单提交之前处理的事件处理程序结果的新浏览器，如果验证失败，应该可以防止第二个事件（表单提交）发生;但是，并非所有浏览器都尊重这些结果，而且我发现有些人会继续提交表单而不管这些结果。

Answer 4

非常感谢大家，所以最后我发现你的想法就是我所做的而是把return formvalidate（）;功能我把它放在提交onclick事件中它运行像魅力...谢谢

<div style="margin-left: 55px;">
                    <input class="btn" style="width: 80px;" type="reset" name="reset" value="Reset" onclick="clearFields()"/>
                    <input class="btn" style="width: 80px;" type="submit" name="submit" value="Login" onclick="return validateForm();"/>
                </div>

这是javascript

function validateForm(){
    var form = document.forms['loginForm'];
    if(document.getElementById('loginName').value == "")
        document.getElementById('usernameError').innerHTML = 'Invalid username or email';
    else{
        form.submit();
    }
    return false;
}

表单在php中验证之前提交

4 个答案: