仅HTML5-复选框输入上的“必填”属性可防止验证失败后重新提交表单
[英]HTML5 only - 'Required' attribute on checkbox input preventing form from being resubmitted after validation fail
问题描述
Looking for answers for HTML5 ONLY, no JS solutions please! 
仅寻找HTML5的答案，请没有JS解决方案！
I'm only just beginning to code so I don't really know what to google to get the answer to this - I've already done a few good hours trying to figure it out in HTML5 only, but what I've found has all involved javascript, or didn't fix my problem. 我才刚刚开始编写代码，所以我真的不知道该怎么用谷歌搜索才能得到答案-我已经花了好几个小时试图仅在HTML5中弄清楚，但是我发现了所有涉及的javascript，还是没有解决我的问题。 The question is: 问题是：
Is there a way in HTML5 to reset the validation value once a form has been submitted once, and failed to submit/got rejected because of a missing value on a 'required' attribute? 一旦提交表单一次，HTML5中是否有一种方法可以重置验证值，并且由于'required'属性上缺少值而无法提交/被拒绝？ I want to make resubmission possible after someone checks the required box if they left it unchecked before, without refreshing the page. 如果某人选中了所需的框（如果之前未选中该框），那么我希望重新提交，而无需刷新页面。
The form in question is below, sorry for the shitpost aspects; 所涉及的表格如下，很抱歉给您留言。
<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>
The SPECIFIC part I'm having trouble with is this bit right here: 我遇到麻烦的特殊部分就在这里：
<!--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">
I'm not sure if there's something inside the rest of the form that's keeping this one part in particular from not working - the others all act as they're supposed to. 我不确定表单的其余部分中是否有某些内容使该部分尤其无法正常工作，而其他部分则按应有的方式工作。 If one is blank, it pops up with the custom warnings I set up, and after I fill it out, it doesn't cause me any issue anymore. 如果为空，则会弹出我设置的自定义警告，并在我填写之后，不再引起任何问题。 The checkbox is the only one that has the persistent message popping up with the refusal to submit it again. 该复选框是唯一一个弹出持久性消息并拒绝再次提交的复选框。 If I check it WITHOUT submitting the form first, everything acts as it was supposed to when I do submit it. 如果我在不先提交表单的情况下进行了检查，那么一切都会按照我提交表单时的预期进行。
I appreciate your help! 我感谢您的帮助！
1 个解决方案
解决方案1
1 已采纳 2018-01-30 09:12:31
You have to change the oninput to onchange for input tags like this: 您必须将输入标签的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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.