选择框的验证CSS

我只是敲定了我们的表单验证，并且我们在输入元素等处发送了css（如果它们不验证）。选择框的验证CSS

但不知道如何与输入以外的其他元素作斗争。

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

通常我们的js是这样的：

对于电子邮件字段。

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

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

来源

2012-01-11 422

AFAIK，u样式复选框和单选按钮背景或边框。 – Johan 2012-01-11 22:28:46

我认为对于这些我们将不得不解雇一条消息，更多的是这些选择让我头脑 – 422 2012-01-11 22:32:32

尽管你可以尝试我的答案，但我认为它最接近你会直接进入边框的复选框/收音机 – Johan 2012-01-11 22:37:54

尝试使用边框属性来代替：http://jsfiddle.net/Kqcx7/1/

来源

2012-01-11 22:32:19 Johan

试过这个，但不是为我们工作。我有点思考禁用提交按钮，除非复选框被勾选 – 422 2012-01-11 22:52:43

Border属性不会为所有的表单元素的工作。你必须在选择框周围添加一个包装span/div。另一种方法是使用大纲属性。

来源

2012-01-11 22:35:36

谢谢，已经发挥与此无济于事 – 422 2012-01-11 22:53:04

选项1：您可以更改标签颜色而不是更改输入边框。

选项2：使用javascript，css和images更改复选框和单选按钮的外观。有很多教程。

比方说您有这样的形式：

<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-按钮/ 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/

来源

2012-01-11 22:36:50

谢谢@Taro不知道如何触发标签CSS变化 – 422 2012-01-11 22:53:36

我添加了一个示例和一些链接，希望这可以帮助 – 2012-01-12 12:46:05

使用jQuery，你可以简单地改变选择（下拉的边界）输入。

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

来源

2015-07-23 12:35:38 Tony

选择框的验证CSS

回答

相关问题