选择框的验证css

时间:2012-01-11 22:24:23

标签: jquery css validation

我刚刚完成表单验证,如果他们不验证,我们会在输入元素等处激活css。

但不确定如何解决输入以外的元素。

例如,选择和收音机和复选框。

通常我们的js是:

对于电子邮件字段。

if(email == "") $('#email').css({"background":"#efefef","border":"1px solid #F12B63"});

只是不确定为什么css验证(错误)不适用于选择元素无线电和复选框......任何建议。验证有效,而不是css部分

4 个答案:

答案 0 :(得分:2)

请尝试使用outline属性:http://jsfiddle.net/Kqcx7/1/

答案 1 :(得分:1)

border属性不适用于所有表单元素。您必须在选择框周围添加包装器span / div。替代方法是使用outline属性。

答案 2 :(得分:1)

选项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”)找到( “跨度”)显示();

您可以查看这些指南以了解自定义复选框和单选按钮:

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.aspx http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/

答案 3 :(得分:0)

使用Jquery,您只需更改选择(下拉)输入的边框。

$('#selectId').parent().css('border-color','red');