仅 HTML5 - 复选框输入的 'Required' 属性阻止验证失败后重新提交表单

Question

仅寻找 HTML5 的答案，请勿使用 JS 解决方案！

我才刚刚开始编写代码，所以我真的不知道如何 google 才能得到这个问题的答案 - 我已经花了好几个小时试图在 HTML5 而已，但我发现的都涉及 javascript，或者没有解决我的问题。问题是：

在 HTML5 中是否有一种方法可以在表单提交一次后重置验证值，并且由于 'required' 属性缺少值而未能 submit/got 被拒绝？我想在有人选中必填框后重新提交，如果他们之前没有选中它，而不刷新页面。

下面是有问题的表格，对于狗屎方面的问题感到抱歉；

<html>
<head>
  <h1>Register</h1>
  <img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>

<body>
  <form method="link" action="https://youtu.be/eBRwu63-qfA">
    <p>
      <h2>Name</h2>
    </p>
    <label for="first">First:</label>
    <input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
    <label for "last">Last:</label>
    <input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
    <p></p>
    <!--gender id-->
    <p>
      <h2>Gender</h2>
    </p>
    <label for="CM">Cis Man</label>
    <input type="radio" id="CM" name="GS1">
    <p></p>
    <label for="TM">Trans Man</label>
    <input type="radio" id="TM" name="GS1">
    <p></p>
    <label for="CF">Cis Woman</label>
    <input type="radio" id="CW" name="GS1">
    <p></p>
    <label for="TF">Trans Woman</label>
    <input type="radio" id="TW" name="GS1">
    <p></p>
    <label for="NBGF">Nonbinary/Genderfluid</label>
    <input type="radio" id="NBGF" name="GS1">
    <p></p>
    <label for="AG">Agender</label>
    <input type="radio" id="AG" name="GS1">
    <p></p>
    <label for="OTHER">Other</label>
    <input type="text" name="OTHER" name="GS1">
    <!--Email Password-->
    <p>
      <h2>Login Details</h2>
    </p>
    <label for="email">Email:</label>
    <input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
    <label for="password">Password:</label>
    <input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
    <!--Bday-->
    <p>
      <h2>Birthday</h2>
    </p>
    <label for="bday1">Which Month</label>
    <select name="bday1">
       <option></option>
       <option>Jealousy</option>
       <option>Federal Agent</option>
       <option>Hell</option>
       <option>April</option>
       <option>Any Of The Rest</option>
      </select>
    <label for="bday2">The Day</label>
    <select id="bday2">
       <option></option>
       <option>1</option>
       <option>0</option>
       <option>Void</option>
      </select>
    <label for="bday3">The Year Of THE Birth Crime</label>
    <select id="bday3">
       <option></option>
       <option>X</option>
       <option>666</option>
       <option>Eternal</option>
      </select>
    <!--Agree&Submit-->
    <p></p>
    <label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
    <input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
    <p></p>
    <input type="submit" name="submitButton" value="COMPLETE">
  </form>
</body>
</html>

我遇到问题的具体部分就在这里：

<!--Agree&Submit-->
<p></p>
<label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
<input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')" oninput="setCustomValidity('')" updateon="form.submit()">
<p></p>
<input type="submit" name="submitButton" value="COMPLETE">

我不确定表单的其余部分是否有什么东西可以防止这一部分特别无法正常工作 - 其他部分都按预期运行。如果一个是空白的，它会弹出我设置的自定义警告，在我填写它之后，它不会再给我带来任何问题。该复选框是唯一弹出持久性消息并拒绝再次提交的复选框。如果我在没有先提交表单的情况下检查它，那么当我提交它时，一切都会按照预期的方式进行。

感谢您的帮助！

Answer 1

对于这样的输入标签，您必须将 oninput 更改为 onchange：

<html>
<head>
  <h1>Register</h1>
  <img src="http://elohell.net/public/comments/small/fb174f37e857128b2b5bdbf0d1c419dc.png" max height="100px" max width="100px">
</head>

<body>
  <form method="link" action="https://youtu.be/eBRwu63-qfA">
    <p>
      <h2>Name</h2>
    </p>
    <label for="first">First:</label>
    <input type="text" id="first" required oninvalid="this.setCustomValidity('Feed It Blood')" oninput="setCustomValidity('')">
    <label for "last">Last:</label>
    <input type="text" id="last" required oninvalid="this.setCustomValidity('Give More')" oninput="setCustomValidity('')">
    <p></p>
    <!--gender id-->
    <p>
      <h2>Gender</h2>
    </p>
    <label for="CM">Cis Man</label>
    <input type="radio" id="CM" name="GS1">
    <p></p>
    <label for="TM">Trans Man</label>
    <input type="radio" id="TM" name="GS1">
    <p></p>
    <label for="CF">Cis Woman</label>
    <input type="radio" id="CW" name="GS1">
    <p></p>
    <label for="TF">Trans Woman</label>
    <input type="radio" id="TW" name="GS1">
    <p></p>
    <label for="NBGF">Nonbinary/Genderfluid</label>
    <input type="radio" id="NBGF" name="GS1">
    <p></p>
    <label for="AG">Agender</label>
    <input type="radio" id="AG" name="GS1">
    <p></p>
    <label for="OTHER">Other</label>
    <input type="text" name="OTHER" name="GS1">
    <!--Email Password-->
    <p>
      <h2>Login Details</h2>
    </p>
    <label for="email">Email:</label>
    <input type="email" name="email" required oninvalid="this.setCustomValidity('We Will Meet Soon')" oninput="setCustomValidity('')">
    <label for="password">Password:</label>
    <input type="password" name="password" minlength="5" maxlength="10" required oninvalid="this.setCustomValidity('Seal Your Fate')" oninput="setCustomValidity('')">
    <!--Bday-->
    <p>
      <h2>Birthday</h2>
    </p>
    <label for="bday1">Which Month</label>
    <select name="bday1">
       <option></option>
       <option>Jealousy</option>
       <option>Federal Agent</option>
       <option>Hell</option>
       <option>April</option>
       <option>Any Of The Rest</option>
      </select>
    <label for="bday2">The Day</label>
    <select id="bday2">
       <option></option>
       <option>1</option>
       <option>0</option>
       <option>Void</option>
      </select>
    <label for="bday3">The Year Of THE Birth Crime</label>
    <select id="bday3">
       <option></option>
       <option>X</option>
       <option>666</option>
       <option>Eternal</option>
      </select>
    <!--Agree&Submit-->
    <p></p>
    <label for="satan">I agree I agree I Agree I Agree I AGREE I AGREE I AGREE I AGREE I AGREE I AGREE</label>
    <input type="checkbox" id="satan" required oninvalid="this.setCustomValidity('IT WILL BE DONE')"
    onchange="setCustomValidity('')"
     updateon="form.submit()">
    <p></p>
    <input type="submit" name="submitButton" value="COMPLETE">
  </form>
</body>
</html>

仅 HTML5 - 复选框输入的 'Required' 属性阻止验证失败后重新提交表单

HTML5 only - 'Required' attribute on checkbox input preventing form from being resubmitted after validation fail

html

forms

checkbox

required