Javascript 未使用jQuery验证程序选中Css样式复选框

单击“提交”按钮后，如果未选中复选框，我希望我的复选框更改标签颜色。我正在使用jQuery验证程序。我不想让标签显示，我只想把“我接受”更改为红色

验证

jQuery.extend(jQuery.validator.messages, {
  required:"This field is required",
  email: "A valid email address is required"
});

复选框

<label for="cbx2">
   <input name="TermsCondition" type="checkbox" value="on" style="float:left;" class="required" id="cbx2">
   <strong>I Accept</strong>
</label>

---

下面是使用css选择器修复此问题的最简单css破解。只需将此添加到css中

.checkbox.valid~strong{
颜色：#000！重要；
}
input.error、.checkbox.error~strong{
边框：1px点红色！重要；
颜色：红色！重要；
}
label.error{
显示：无！重要；
}

$.validator.setDefaults({
submitHandler:function（）{
警报（“已提交！”）；
}
});
$（）.ready（函数（））{
//在键盘上验证注册表格并提交
$（“#注册表”）.validate({
规则：{
名字：“必选”，
姓氏：“必需”，
用户名：{
要求：正确，
最小长度：2
},
密码：{
要求：正确，
最小长度：5
},
确认密码：{
要求：正确，
最小长度：5，
equalTo:“#密码”
},
电邮：{
要求：正确，
电子邮件：真的
},
主题：{
必填项：“#通讯：已选中”，
最小长度：2
},
同意：“必需”
},
信息：{
名字：“请输入您的名字”，
姓氏：“请输入您的姓氏”，
用户名：{
必需：“请输入用户名”，
minlength：“您的用户名必须至少包含2个字符”
},
密码：{
必填：“请提供密码”，
minlength:“您的密码长度必须至少为5个字符”
},
确认密码：{
必填：“请提供密码”，
minlength：“您的密码长度必须至少为5个字符”，
equalTo：“请输入与上述相同的密码”
},
电子邮件：“请输入有效的电子邮件地址”，
同意：“请接受我们的政策”，
主题：“请至少选择2个主题”
}
});
//通过组合名字和姓氏来建议用户名
$（“#用户名”）.focus（函数（）{
var firstname=$（“#firstname”）.val（）；
var lastname=$（“#lastname”）.val（）；
if（firstname&&lastname&&！this.value）{
this.value=firstname+“+”lastname；
}
});
});
验证完整的表单

名字


姓氏


用户名


密码


确认密码


电子邮件


请同意我们的政策
我接受

您可以使用

css

：not（）

和参数

：选中的
，相邻同级
+
选择器；在
onsubmit
事件中，如果未选中
#cbx2
，则添加
className
，将
#cbx2
颜色设置为
红色


document.getElementById（“表单”）.onsubmit=函数（事件）{
var message=this.querySelector（#cbx2”）；
如果（！message.checked）message.className=“无效”；
}
#cbx2:未（：选中）。无效+强{
颜色：红色；
}

我接受
您可以使用Jquery验证回调函数（成功时，错误时）：


$（“#注册表执行”）。验证({
成功：函数（）{
$（“#L#u Accept”）.css（'color'，'black'）；
},
错误：函数（）{
$（“#L#u Accept”）.css（'color'，'red'）；
this.defaultRors（）；
},
/*禁用（focusout、keyup、click）事件
仅通过“提交”按钮强制检查验证。
*/
onfocusout:false，
onkeyup:false，
onclick:false
});
label.error{
显示：无！重要；//隐藏默认错误标签。
}

表单验证示例
我接受
如果它能以最简单的方式解决您的问题，请对此进行投票。@Ani Menon它正在按预期工作。检查添加的代码段。代码无效。我可以用一个简单的输入来完成。但我无法在复选框中完成。只是添加了复选框。检查更新的答案。它工作正常。我希望它在提交按钮后变为红色。@Jerika看到我更新的答案，我希望它能如你所愿工作，谢谢。我希望它在单击提交按钮时变为红色。@Jerika“我希望它在单击提交按钮时变为红色。”请参阅更新的帖子。
label.error {
    font: 0/0 a;
}