Javascript 验证后的表单提交答案

【问题标题】：Form submission after Javascript ValidationJavascript 验证后的表单提交
【发布时间】：2015-12-01 08:26:57
【问题描述】：

在使用JavaScript 验证表单后，我想将表单提交到名为reg.php 的PHP 文件。 HTML 表格如下：

HTML 表单：

<form method="post">
   <input type="text" id="username" name="username"></input>        
   <button type="button" onclick="val()">Sign Up</button>
</form>

JavaScript 验证

以下是JavaScript的验证码：

function val(){

    var uname = document.getElementById('username').value;
    if(!uname){
        document.getElementById("error").innerHTML = "Enter a username";
        return false;
    }
    else{
        // I want to submit form if this else statement executes.
    }


}

【问题讨论】：

如果您将按钮更改为type="submit" 并输入onclick="return val();"，那么表单将自动提交，除非您的函数返回false（就像验证失败时一样）。只需将action="reg.php" 添加到表单元素即可。

标签： javascript php html forms validation

【解决方案1】：

只需在<form> 和return val() 函数中添加action="reg.php" onclick，也可以使type="submit" 提交表单，例如：

HTML 代码：

<form method="post" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="submit" onclick="return val()">Sign Up</button>
</form>

JAVASCRIPT 代码：

只需在else 中添加 return true; 即可：

function val(){

    var uname = document.getElementById('username').value;
    if(!uname){
        document.getElementById("error").innerHTML = "Enter a username";
        return false;    // in failure case
    }        
    return true;    // in success case
}

【讨论】：

【解决方案2】：

您可以在 else 部分使用表单name 提交。

document.myForm.submit();

 var uname = document.getElementById('username').value;
 if (!uname) {
      document.getElementById("error").innerHTML = "Enter a username";
      return false;
 } else {
      document.myForm.submit(); // Form will be submitted by it's name
 }

标记

<form method="post" name="myForm">.....</form>

Demo

【讨论】：

记得在
处添加动作

【解决方案3】：

HTML 代码

<form method="post" onsubmit="return val()">
     <input type="text" id="username" name="username">       
     <button type="submit" >Sign Up</button>
 </form>

Javascript 代码

function val(){

     var uname = document.getElementById('username').value;
     if(!uname){
         document.getElementById("error").innerHTML = "Enter a username";
         return false;
     }
     else{
         return true;
     }
}

【讨论】：

好吧，我有一个问题..在表单中您使用的是 onsubmit，然后您使用的是带有 onclick 的按钮类型？您能否与答案分享一些信息，那会很棒..对不起我的问题。
让我解释一下，我现在是这样回答的，有人给我发了一些东西，比如如果你批准了一些更改，我认为只是修改形状而不是脚本，但他改变了它，所以我编辑了我原来的答案。
但我的问题是，当您不使用提交按钮时，您正在调用函数 onsubmit..对不起，我在 php 中不好，所以问..请不要介意..thanx
你说得对，应该是type="submit"，我改一下，谢谢
有时，id不要在这样的问题上深入代码，因为我认为问的人已经被覆盖了，所以我照原样复制它，但我错了，谢谢

【解决方案4】：

这里，你需要获取表单元素和submit()它，所以你需要将id添加到表单中，并将action属性添加到reg.php文件中：

JSFiddle

<form method="post" id="theForm" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="button" onclick="val()">Sign Up</button>
</form>

JS：

function val() {
    var uname = document.getElementById('username').value;
    if (!uname) {
        document.getElementById("error").innerHTML = "Enter a username";
        return false;
    } else {
        document.getElementById('theForm').submit();
    }
}

【讨论】：

【解决方案5】：

您可以在 else 块中放置一个 return true 语句，然后将表单更改为 this。

<form method="post" action="reg.php">
   <input type="text" id="username" name="username"></input>        
   <button type="submit" onclick="return val()">Sign Up</button>
</form>

【讨论】：