No required message on checkbox validation

[MystyxMac]

I have a checkbox for agreeing to the terms and conditions and want a required message if someone did't check this box. I've put the required attribute on it and expect a browser default required message as it says in de bootstrap docs. Other fields are working as expected.

<div class="form-check">
    <label class="form-check-label">
        <input class="form-check-input" type="checkbox" value="" required>
        <span class="form-check-sign">
            <span class="check"></span>
        </span>
        I agree to the <a href="#">terms and conditions</a>.
    </label>
</div>

[dragosct]

Hi, @MystyxMac! Thank you for using our product. In your example from your input, is missing the id and on the span tag is missing the for attribute with the value if the id like in the bootstrap example . Regards, Dragos

[MystyxMac]

Hi, thanks for you quick answer, unfortunately it does not work for me. Still no browser warning message for not checking the checkbox. I put a id attribute on the input tag and a for attribute on the first span tag and tried it also on the second span tag. Also tried the for attribute on the label tag. All were not successful.

I got this html excerpt from the sign-in page example in the Material Kit.

Any other ideas?

Edit: When i remove the required attribute from the checkbox, the form is send, so validation works but no warning...

<div class="form-check">
    <label class="form-check-label">
        <input id="checkTerms" class="form-check-input" type="checkbox" value="" required>
        <span class="form-check-sign" for="checkTerms">
            <span class="check"></span>
        </span>
        I agree to the <a href="#">terms and conditions</a>.
    </label>
</div>

[MystyxMac]

I post this a new comment because i have found a solution, but not the way i like/want it.

If I remove the form-check class from the parent div, then the browser warning is working. But this way I don't have a styled checkbox (It's the browser's default).

Is it possible to use the browser default warnings on styled checkboxes?

[dragosct]

Hi, @MystyxMac! Please, can you give us your link project to see better what happens there? Regards, Dragos

[MystyxMac]

This page shows that the default browser validation messages doesn't work for the checkbox. The strange this is that is works without the styling... try to remove the form-check class from the parent div of the checkbox.

https://miraku-28-2-20218.appspot.com/contact

I tried the same code on different browsers (Chrome, Firefox and Edge) latest versions) and it only works in Firefox. 😕

[dragosct]

Hi! Why do you don't try to use a validation library for this, like we use in the material dashboard pro? It will fix the problem. Regards, Dragos

[MystyxMac]

Thanks, I will try that!

[dragosct]

Hi! This is the library that we use https://jqueryvalidation.org/. Regards, Dragos

[KannaDinesh]

I also have the same issue, please rectify..!

[MystyxMac]

I end up using the mentioned library.

[janjdev]

Not sure if this is still an issue for anyone but I overrode the styling on the checkboxes so the browser validation would be visible. .form-check .form-check-input { opacity: 1; height: inherit; width: inherit; overflow: visible; } This keeps the material styles and allows the browser validation to be visible.

[CodeScroll]

For my.

That works. https://prnt.sc/s06o51

That doesn't https://prnt.sc/s06oaa