选择框的验证 css答案

【问题标题】：validation css for select boxes选择框的验证 css
【发布时间】：2012-01-11 22:24:22
【问题描述】：

我刚刚完成我们的表单验证，如果输入元素等没有验证，我们会触发 css。

但不确定如何针对输入以外的元素解决此问题。

例如，选择、单选和复选框。

通常我们的 js 是：

对于电子邮件字段。

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

只是不确定为什么 css 验证（错误）在选择元素单选和复选框上不起作用......任何建议。验证有效，只是 CSS 部分无效

【问题讨论】：

AFAIK，你不能设置复选框和单选按钮的背景或边框。
是的，我认为对于这些，我们将不得不发出一条消息，更重要的是，这些选择让我头疼
你可以试试我的回答，我认为它是最接近你直接在复选框/收音机上的边框

标签： jquery css validation

【解决方案1】：

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

【讨论】：

试过了，但对我们不起作用。我有点想禁用提交按钮，除非勾选复选框

【解决方案2】：

边框属性不适用于所有表单元素。您必须在选择框周围添加一个包装器 span/div。另一种方法是使用大纲属性。

【讨论】：

【解决方案3】：

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

【讨论】：

我添加了一个示例和一些链接，希望对您有所帮助

【解决方案4】：

使用 Jquery，您可以简单地更改选择（下拉）输入的边框。

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

【讨论】：