仅限HTML5 - ＆＃39;必需＆＃39;复选框输入的属性，防止在验证失败后重新提交表单

时间：2018-01-30 07:53:38

标签： html html5 forms checkbox required

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

我只是刚刚开始编码，所以我真的不知道该怎么去谷歌才能得到答案 - 我已经花了好几个小时试图在HTML5中找到答案只是，但我发现的所有内容都涉及到javascript，或者没有解决我的问题。问题是：

HTML5中是否有一种方法可以在表单提交一次后重置验证值，并且由于缺少“＃required”所需的值而无法提交/拒绝。属性？我想在有人检查所需的方框之后重新提交，如果他们之前没有选中它，而不刷新页面。

有问题的表格如下，对于shitpost方面感到抱歉;

＆＃13;
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

＆＃13;
＆＃13; 
<!--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">
＆＃13;
＆＃13;
＆＃13;

我不确定表格其余部分内是否有某些东西特别是因为不工作而保持这一部分 - 其他人都按照他们的意愿行事。如果一个是空白的，它会弹出我设置的自定义警告，在我填写之后，它不会再引起任何问题。该复选框是唯一一个持久消息弹出而拒绝再次提交的复选框。如果我在没有提交表格的情况下检查它，一切都按照我提交时的原样行事。

感谢您的帮助！

1 个答案:

答案 0 :(得分：0)

您必须将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>

相关问题
最新问题