Why isnt the <required> attribute on my checkbox working despite having set up some JS code making this a requirement?

Question

Right, why is it still possible to send off the html form I have created without the need to check the Privacy Policy consent checkbox, despite having JS code requiring the user that this checkbox needs to be checked for the form to be submitted?

My browser is Edge.

Heres the code:

#agreeCheckbox{
	position: absolute;
	display: inline;
	margin-left: 5px;
	margin-bottom: 12000px;
	padding:5px;
	background-color: white;
}
#agreeCheckbox {
		display: none;
		margin-bottom: 20px;
}
input + .label-text:before{
	content:"\f046 ";
	font-family: Fontawesome;
	margin-right: 5px;
	display: inline-block;
	width: 1em;
	font-size: 15px;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
}
input:checked + .label-text:before{
	content: "\f096 ";
	font-family: Fontawesome;
	line-height: 1;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-size: 15px;
}
.label-text{
	font-size: 15px;
    color: #FFF;
    font-weight: normal!important;
    cursor: pointer!important;
}
.no-content:after{
	content: "";
	margin-top:5px;
    
}

<script>
function consentValidation() {
  var x = document.getElementById("myCheck").required;
  document.getElementById("demo").innerHTML = "You must consent to our Privacy Policy before submitting this form.";
}
</script>

<form method="post" action="../php/services-interest-form.php" enctype="multipart/form-data">

                                    <p class="legal-section-title" style="color: #FFF!important;">Privacy Notice</p>
                                    <p style="color: #FFF!important;">We want you to know how our service works and why we need your registration details. Please read our <a href="../pages/privacy policy.html">Privacy Policy</a> and then tick below that you agree with it.</p><br/>
                                    <label class="no-content" style="display: inline;">
                                        <input name="agreePP" id="myCheck" type="checkbox" value="true" required />
                                        <span class="label-text">I accept and agree to the Privacy Policy*</span>
                                        <p id="demo" class="label-text" style="color:red!important;">You must consent to our Privacy Policy before submitting this form.</p>
                                    </label>
                                </div><br/>
                                <input onClick="consentValidation()" class="std_button" type="submit" value="Submit"/>
                            </form>

In addition to this, why when I remove the checked attribute, is the default state of the checkbox checked and vice-versa. When I insert the checked attribute, the default state remains unchecked?

This is also a custom css checkbox hence why mines a little more complicated than most. Sorry about that however, this is a consent to our Privacy Policy so this need to be 100% correct for obvious reasons.

It's getting beyond a joke to be honest but if anyone can shed some light onto this then that would be great.

Thanks

Answer 1

You need to wrap your inputs in a form for it to work. Here's your updated code

<form>
    <label class="no-content" style="display: inline;">
      <input name="agreePP" id="myCheck" type="checkbox" value="agreePP" required>
      <span class="label-text">I accept and agree to the Privacy Policy*</span>
      <p id="demo" class="label-text" style="color:red!important;"></p>
    </label>
    <input onClick="consentValidation()" class="std_button" type="submit" value="Submit"/>
</form>

Answer 2

It's simple. You should wrap them in form element:

<form>
...
</form>

And other attributes you may need like action, method. Check the docs.