Materialize: Checkbox "validate" not showing/implemented

[rkyoku]

Native validation on checkboxes is important. The first example that comes to mind is to confirm having read the Terms of Service before registering to said service.

However, it does not seem to work, despite using the same syntax as for other input fields:

<div class="input-field no-margin col s12 m9">
    <input type="checkbox" name="accept" id="regTOS" required class="validate">
    <label for="regTOS" data-error="You must accept the Terms of Service">I accept the Terms of Service</label>
</div>

[newswim]

I'm also encountering this, even when I convert the submit to an input (which I don't think makes a difference).

[newswim]

So this is because of the css overrides to the native input selector. See:

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
     position: absolute;
     left: -9999px;
     opacity: 0;
}

I'm not sure how you would resolve this. Seems there would need to be some kind of hook into the native require input api to display the message below this custom selector overriding the input element.

[newswim]

Since i really wanted to show the native validation, I removed the left: -9999px property and added margin-top: 8px; just so it lines up a little nicer.

[Ravaelles]

Confirmed, like newswim wrote, I've used:

[type=checkbox]:not(:checked) {
    left: inherit;
    margin-top: 8px;
}

...and it works fine.

[Dogfalo]

Fixed in 57423d86