我刚刚完成我们的表单验证,如果输入元素等没有验证,我们会向它们发送css。
但不确定如何为输入以外的元素对抗这种情况。
例如,选择和单选框以及复选框。
通常我们的js是:
对于电子邮件字段。
if(email == "") $('#email').css({"background":"#efefef","border":"1px solid #F12B63"});
只是不确定为什么css验证(错误)不适用于select元素radio和checkbox。。。任何建议。验证有效,只是css部分无效
请改用outline属性:http://jsfiddle.net/Kqcx7/1/
border属性不会适用于所有表单元素。您必须在选择框周围添加一个包装span/div。另一种方法是使用outline属性。
选项1:您可以更改标签颜色,而不是更改输入边框。
选项2:使用javascript、css和图像更改复选框和单选按钮的外观。有很多教程。
假设你有这样的表格:
<form method="post" action="/path/to/action" id="exampleForm">
<div id="fullNameBlock">
<label>Full Name:</label><input type="text" value="" name="fullname" >
</div>
<div id="emailBlock">
<label>Email:</label><input type="text" value="" name="email" >
</div>
<input type="submit" value="Send" >
</form>
假设您在提交时进行验证:
if( !validate() ) {
}
你的电子邮件是错误的。一种选择是这样做:
$("#emailBlock").find("label").css({color: "red"});
您还可以在输入下方添加隐藏消息:
<div id="emailBlock">
<label>Email:</label><input type="text" value="" name="email" > <br>
<span style="display:none;">Your email is invalid</span>
</div>
并在出现错误时显示消息:
$("#emailBlock").find("span").show();
您可以查看这些指南中的自定义复选框和单选按钮:
http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/http://www.dailycoding.com/Posts/customized_html_controls_creating_custom_checkbox.aspxhttp://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/
使用Jquery,您可以简单地更改选择(下拉)输入的边框。
$('#selectId').parent().css('border-color','red');