表单在php中验证前提交

form submits before validation in php

本文关键字：前提 提交 验证 php 表单      更新时间：2023-09-26

我有一个要提交的表单，所以当我点击提交时，它会转到selectorpage.php，并在其中找到所选的函数类型，例如登录，它会进一步调用控制器来执行函数。我遇到的问题是，js中有一个名为validateForm（）的函数，我一点击提交按钮，它就会转到selectorPage.php。我想停止表单提交，通过js进行验证，然后从那里提交表单，我使用了onsubmit=return false；in form标记，但它只是阻止了执行任何进一步操作的形式。我也不知道如何将表单重定向到selectorPage，如果它在js中工作的话。所以任何人都想告诉我如何从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

您可以尝试

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

在validateForm()函数中使用

return true / false

取决于是否发现错误。

以下是使用内联事件处理的规范方法，请进一步了解如何使其不引人注目。表单标签上只有一个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
  }
}

我自己过去也遇到过类似的问题。

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

使用"onsubmit=return false；"，很可能正是在做它应该做的事情——退出当前的javascript范围（从而阻止与该特定事件相关联的其他javascript执行）。然而，不幸的是，表单本身的提交虽然可以通过javascript触发和控制，但实际上并不是由javascript处理的，也不是javascript函数本身。

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

您尚未包含"validateForm（）；"javascript函数，所以我不知道它包含什么，但是，如果它还没有这样做，我会包含通过该javascript函数提交表单的代码，在验证成功后提交表单（或者在验证失败时返回某种人类可读的错误）-这与使用"按钮"而不是"提交"相结合应该可以解决您的问题。

希望这能有所帮助。：）

编辑：在我最初回复后不久就想到了这一点。一些浏览器会在通过提交输入类型提交表单之前处理诸如"onclick"之类的事件处理程序；然而，我发现某些较旧的浏览器目前并没有做到这一点（这就是我上面文章的上下文）。对于接受表单提交前处理的事件处理程序结果的较新浏览器，如果验证失败，则应该可以防止第二个事件（表单提交）发生；然而，并不是所有的浏览器都会接受这些结果，我发现有些浏览器会继续提交表单，而不管这些结果如何。

好吧，谢谢大家，所以我终于根据你们的想法找到了解决方案，这就是我所做的而不是放置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;
}
相关文章：