Javascript 验证后的表单提交

Posted 2023-02-22

【中文标题】Javascript 验证后的表单提交

【英文标题】：Form submission after Javascript Validation

【发布时间】：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" 添加到表单元素即可。

【参考方案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>