【问题标题】:HTML5 only - 'Required' attribute on checkbox input preventing form from being resubmitted after validation fail仅限 HTML5 - 复选框输入上的“必需”属性可防止表单在验证失败后重新提交
【发布时间】:2018-01-30 17:12:31
【问题描述】:

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

我才刚刚开始编写代码,所以我真的不知道该用谷歌搜索什么来得到这个问题的答案——我已经做了几个小时试图仅在 HTML5 中弄清楚它,但我'我发现都涉及javascript,或者没有解决我的问题。问题是:

HTML5 中是否有办法在表单提交一次后重置验证值,但由于“必需”属性上缺少值而未能提交/被拒绝?如果有人之前未选中所需的框,我希望在不刷新页面的情况下选中该框后重新提交。

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

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

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

感谢您的帮助!

【问题讨论】:

    标签: html forms checkbox required


    【解决方案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>

    【讨论】:

    • 完美!工作得恰到好处,天哪 - 非常感谢。
    猜你喜欢
    • 1970-01-01
    • 2012-12-14
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-30
    • 1970-01-01
    • 2016-05-30
    • 1970-01-01
    相关资源
    最近更新 更多