我的注册表单使用HTML5验证来验证必填字段是否已填写。
<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"/>
I have read and agree to the terms of use.
</label>
</div>
<input type="submit" name="submit" class="btn">
</form>
</div>
</div>
</div>
我使用CSS将默认复选框替换为自定义的.svg复选框。
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);
}
尽管HTML5验证适用于其他字段,但我无法使其适用于自定义复选框。 我尝试了jQuery validation with custom CSS checkbox中提供的方法,但没有成功。 有什么建议吗?