0

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

4 回答 4

3

你可以试试

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

在validateForm()功能使用

return true / false

取决于是否发现错误。

于 2012-07-15T06:29:43.900 回答
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
  }
}
于 2012-07-15T09:17:58.867 回答
0

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

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

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

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

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

希望这可以帮助。:)

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

于 2012-07-15T06:33:35.877 回答
0

好吧，谢谢大家，所以最后我通过你的想法找到了解决方案，这就是我所做的，而不是把 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;
}
于 2012-07-15T07:55:09.600 回答