CODEWITHSUNDEEP
htmlformscheckboxrequired
Robosthetic
Robosthetic

Reputation: 13

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!

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. 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? 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!

Upvotes: 1

Views: 6315

Answers (1)

DeclanMcD
DeclanMcD

Reputation: 1586

You have to change the oninput to onchange for input tags like this:

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

Upvotes: 3

Related Questions