通过 JavaScript 强制 HTML 表单验证

Posted 2023-05-07

【中文标题】通过 JavaScript 强制 HTML 表单验证

【英文标题】：Force HTML form validation via JavaScript

【发布时间】：2016-03-27 22:53:23

【问题描述】：

我创建了一个 html 表单，它有两个按钮（而不是提交按钮），每个按钮都以编程方式将表单发送到一个唯一的表单操作地址。

<form id="formExample">
<input type="text" id="input1" required>
<label type="button" onClick="form1()">Form Action 1</label>
<label type="button" onClick="form2()">Form Action 2</label>
</form>

脚本：

form = document.getElementById("formExample");

function form1() 
    form.action="example1.php";
    form.submit();

function form2() 
    form.action="example2.php";
    form.submit();

运作良好，响应您按下的按钮。但是，之前工作的相同 html 表单验证（使用“提交”按钮时）不再显示提示，并且无论是否有输入，表单都会发送。

我已经读过，因为我以编程方式调用 form.submit()，它绕过了表单的 onSubmit() 函数，这是进行验证的地方。

我的问题是：我可以以编程方式强制 onSubmit() 以便弹出验证吗？我必须明确表示我不想创建 javascript 表单验证，即使用警报；相反，当您单击提交时，请使用 JavaScript 来执行此处的 HTML 验证：https://jsfiddle.net/qdzxfm9u/

【问题讨论】：

您只需将按钮的类型从button 更改为submit 并从您的JS 部分中删除form.submit()。

如果你会使用JQuery，看看this answer。

干杯@cFreed，这已经解决了问题！如果您想在答案部分再次提供它，我很乐意接受作为解决方案。谢谢！

大功告成！很高兴为您提供帮助，也很高兴您接受我的回答 :)

@dantan04，你可以考虑<input type="submit" onClick="form1()" value="Form Action 1" />而不是<label type="submit" onClick="form2()">Form Action 2</label>，因为后者不是一个有效的HTML，把你的表单html放在validator.w3.org/nu/#textarea的正文中，然后点击check

【参考方案1】：

您只需将按钮的类型更改为 submit 并从 JS 部分中删除 form.submit()。

所以HTML部分变成了：

<form id="formExample">
<input type="text" id="input1" required>
<button type="submit" onClick="form1()">Form Action 1</button>
<button type="submit" onClick="form2()">Form Action 2</button>
</form>

这样，点击任意按钮会自行提交，但之前执行的是JS部分：

form = document.getElementById("formExample");

function form1() 
    form.action="example1.php";

function form2() 
    form.action="example2.php";

---

编辑

警告：我最初的解决方案是基于 OP HTML 部分的副本，其中“伪按钮”使用了一个奇怪的元素 <label type="input"...>，所以我读（太快）就好像它是 <button type="button"...> 一样简单将 type 从 input 更改为 submit！ 这样，它就无法按预期工作。

现在在上面的代码中更正了。

【讨论】：

"点击任何按钮都会自行提交，但在执行 JS 部分之前" 他必须执行 js 部分，因为他需要决定必须附加哪个操作到表格

@Mi-Creativity。我不明白你的意思。我同意必须执行 JS 部分，但这就是发生的事情。

我的意思是如果 JS 部分不会被执行，那么表单的 action= 属性将是什么 - example1.php 或 example2.php - 考虑到它只是通过JS设置？

@Mi-Creativity。严格来说，如果没有执行 JS 部分，那么我们知道默认适用，即当前脚本用作 action 值。但在当前情况下，这不会发生，因为它是这样编写的，每个提交按钮都有自己的onclick 事件触发所需的处理程序。

请耐心等待，所以JS部分将在点击时执行然后表单根据你的代码提交，检查这个链接phpfiddle.org/lite/code/rt18-mzu9 - hit run to execute - 这正是你的代码，带有一点 CSS，我想知道它是否显示 HTML 验证并提交并为你工作。

【参考方案2】：

也许是这样的：

var form = document.getElementById("formExample");

function form1() 
  form.action="example1.php";


function form2() 
  form.action="example2.php";

<form id="formExample">
  <input type="text" id="input1" required>
  <input type="submit" onClick="form1()" value="Form Action 1" />
  <input type="submit" onClick="form2()" value="Form Action 2" />
</form>

【讨论】：

这是正确的！我没有接受它作为答案的唯一原因是因为有人在您之前在我的 cmets 提要上提出了相同的想法。我很感激你的努力。

【参考方案3】：

创建一个dropdown 列表怎么样 - 可以是单选按钮 - 包含表单两个操作和一个提交按钮，就像在这个 JS Fiddle 中一样，然后在表单 submit 上具有一个功能

var form = document.getElementById("formExample"),
    select = document.getElementById("slct");

form.addEventListener('submit', function() 
  if (select.value == 1) 
    form.action = "example1.php";
   else 
    form.action = "example2.php";
  
  // alert for demo only
  alert(form.action);
  form.submit();
);

<form id="formExample">
  <input type="text" id="input1" required>
  <select id="slct" required>
    <option></option>
    <option value="1">Form Action 1</option>
    <option value="2">Form Action 2</option>
  </select>
  <button type="submit">Submit</button>
</form>

【参考方案4】：

function togglePassword(el)
     var checked = el.checked;
     if (checked) 
        document.getElementById("password").type = 'text';
        document.getElementById("toggleText").textContent= "Hide";
      else 
        document.getElementById("password").type = 'password';
        document.getElementById("toggleText").textContent= "Show";
     
  

  function login()
  
     var uname = document.getElementById("uname").value;
     var password = document.getElementById("password").value;
     if(uname === '')
     
        alert("Please enter the user name.");
     
     else if(password === '')
     
        alert("Enter the password");
     
     else
     
        alert('Login Successful. Thank You!');
     
  

  function clearFunc()
  
     document.getElementById("uname").value="";
     document.getElementById("password").value="";

<script type="text/javascript">
      function togglePassword(el)
         var checked = el.checked;
         if (checked) 
            document.getElementById("password").type = 'text';
            document.getElementById("toggleText").textContent= "Hide";
          else 
            document.getElementById("password").type = 'password';
            document.getElementById("toggleText").textContent= "Show";
         
      

      function login()
      
         var uname = document.getElementById("uname").value;
         var password = document.getElementById("password").value;
         if(uname === '')
         
            alert("Please enter the user name.");
         
         else if(password === '')
         
            alert("Enter the password");
         
         else
         
            alert('Login Successful. Thank You!');
         
      

      function clearFunc()
      
         document.getElementById("uname").value="";
         document.getElementById("password").value="";
        
   </script>     

/* heading  */
h1 
    display: block;
    font-size: 2em;
    font-weight: bold;
    /* padding: 0% 1% 3% 6.5%; */
    margin: 0% 35% -10% 36%;



h1:hover
  color:#4499d9 ;
  transform: translateY(-5px);



/* bg image */
body 
  background-image: url('img/bg4.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100% 100%;



/* Bordered form */
form 
 /*  border: 13px solid black; */
  width: 27%;
  height: auto;
  position: absolute;
  left: 10%;
  margin-left: -3px;
  top: 18%;


/* Full-width inputs */
input[type=text], input[type=password] 
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;


/* Set a style for all buttons */
button 
  background-color: #17234b;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 49%;


/* Add a hover effect for buttons */
button:hover 
  background-color: #4499d9;
   transform: translateY(-5px);
  box-shadow: 1px 3px 7px #6f6d72;


#toggleText 
    display: block;



/* Center the avatar image inside this container */
.imgcontainer 
  text-align: center;
  margin: 24px 0 12px 0;


/* Avatar image */
img.avatar 
     width: 30%;
    border-radius: 20%;
     box-shadow: 1px 3px 9px #6f6d72;


img.avatar:hover
   transform: translateY(-5px);
  box-shadow: 7px 9px 9px #6f6d72;


/* Add padding to containers */
.container 
  padding: 16px;


span.buttons
    width: 100%;
    display: flow-root;


#toggleText
  float: left;


#toggle
  float: left;

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
   <h1>LOGIN PANEL</h1>
   <!-- Login Form -->
   <div class="form"> 
      <form >
         <div class="imgcontainer">
            <img src="img/Login.jfif"  class="avatar">
         </div>
         <div class="container">
            <label for="uname"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" id="uname" name="uname"/>
            <label for="password"><b>Password</b></label>
            <input type='password'placeholder="Enter Your Password" name="password" id='password'/>
            <input type='checkbox' id='toggle' onchange='togglePassword(this)'><span id='toggleText'>Show</span>
            <span class="buttons">
               <button type="submit" value="Reset" onclick="clearFunc()" class="btn">Reset</button>
               <button type="submit" value="Login" class="btn" onClick="login()">Login</button>
            </span>
         </div>
      </form>
   </div> 


 
</body>
</html>

【讨论】：

欢迎来到 Stack Overflow。没有任何解释的代码很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的问题并解释它如何回答所提出的具体问题。见How to Answer。