[Bug] Native checkbox validation fails

[stebogit]

Version

1.3

Reproduction link

https://jsfiddle.net/jStefano/j23nvhy0

Operating System

MAC OS

Device

MacBook

Browser & Version

Chrome/Firefox

Steps to reproduce

input a username and don't check the checkbox, then hit submit

What is expected?

the browser form validation should display a warning prompting the user to check the terms and conditions checkbox

What is actually happening?

the warning is not shown, in fact nothing happens, and in Chrome an error is logged to the console

---

Solution

remove visibility: hidden from the input style and move it a bit so that the warning message can appear in the expected position.

.form-check input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    visibility: initial !important;
    left: 27px;
    top: 8px;
}

Additional comments

[dragosct]

Hi, @stebogit! Thanks for using our products. Did you mean that the style is not present when the checkbox is not selected and you press the submit button, right?

Regards, Dragos

[stebogit]

@dragosct10 no the issue is the warning message not showing:

and this the error you get, only on Chrome, if you have visibility: hidden on the input

[dragosct]

Hi! Now I get it. The solution is good the visibility hidden must be removed.

Regards, Dragos