通过 JavaScript 强制 HTML 表单验证

Question

我创建了一个 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/

Answer 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！
这样，它就无法按预期工作。

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

Answer 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>

Answer 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>

Answer 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" alt="Login Avatar" 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>