css - Displaying HTML5 validation message for custom checkbox -


my sign-up form uses html5 validation validate required fields have been completed.

<div class="container">     <div class="row">         <div class="col-md-6 col-md-offset-3">             <form action="https://www.salesforce.com" method="post" id="signup">                 <div class="form-group">                     <label for="first_name">first name</label>                     <input id="first_name" maxlength="40" name="first_name" size="20" type="text" class="form-control" required>                 </div>                 <div class="checkbox">                     <label>                         <input id="tou" name="tou" type="checkbox" value="1" required="required"/>                         have read , agree terms of use.                     </label>                 </div>                 <input type="submit" name="submit" class="btn">             </form>         </div>     </div> </div> 

i've replaced default checkbox custom .svg checkbox using css.

input[type=checkbox] {     display: inline-block;     font-style: normal;     font-weight: normal;     line-height: 1;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale;     visibility: hidden; }  input[type=checkbox]:before {     content: url(/static/img/unchecked.svg);     visibility: visible; }  input[type=checkbox]:checked:before {     content: url(/static/img/checked.svg); } 

while html5 validation works other fields, can't work custom checkbox. tried methods shown in jquery validation custom css checkbox without success. ideas?