Question

我真的需要你的jquery和css的帮助。在这里：

说我有三种类型的字段

<input id="customer_name" name="customer_name" type="text" value="jo"/>
<select id="address_province" name="address_province" style="width:95%;" >
    <option value="">a</option>
    <option value="b">b</option>
</select>
<input type="checkbox" value="" id="purchase_selected" name="purchase_selected" /> 
<label for="purchase_selected">hi</label>

每个文本都有一个默认值，如果用户没有输入任何内容，则输入显示默认值（使用js）。如果字段对某些规则无效，则应该没有错误消息，但文本应为红色。（如果规则为“required”，则默认值应为红色）。也许有点混乱。例如，如果文本输入为空，则选择值为''并且在上面的示例中未选中复选框，值jo，a，hi shoule为红色。到目前为止，我可以通过以下代码实现这一目标：

$('#registerForm').validate({

    errorPlacement: function () {
        return false;
    },

    submitHandler: function (form) { 
        var errors=0;
        var name = $("input[name='customer_name']").val(); 
        var td = $("#purchase_selected").is(":checked");

        if(name==""){ 
            $("input[name='customer_name']").css("color","red"); 
            errors++;
        }else{ 
            $("input[name='customer_name']").css("color","white");  
        }
        //code for purchase_selected omitted
        if(errors==0)
            submit();

    }

});

但它让我对选择字段感到疯狂。选择“a”时，我无法将文本设为红色。最好的解决方案是我设置.error和.valid css样式和在select标记中使用关键字“required”。但它不会使文本变红，而只会使边框变为红色。此外，似乎“必需”首先验证，如果它通过，那么来到submitHandler，这会使用户体验不佳。

任何建议都将不胜感激。

我想知道我是否可以使用类似的东西：

rules: {
   customer_name:{
        required: true
    },
    address_province:{
        required: true
    },
    purchase_selected:{
        required: true
    }
}

我试了一下，但什么都没发生。即使这样，我也不知道如何在文本无效时将文本设置为红色。

Answer 1

浏览器对样式选择的支持很糟糕，至少可以说...

由于您使用jQuery，我建议您查看一些jQuery select box plugins。然后你可以自由地设计它们。

Answer 2

试试这段代码：

if($("#address_province :selected").text() == "a"){
    $("#address_province :selected").css("color", red);
}

jquery css验证里面输入没有消息红色文本问题

2 个答案: