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?