javascript - 输入中的 jquery css 验证没有消息红色文本问题

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)。如果字段对某些规则无效，则不应出现错误消息，但文本应为红色。 (如果规则为“必需”，则默认值应为红色)。也许有点困惑。例如，如果文本输入为空，则选择值为 '' 并且在上面的示例中未选中复选框，值 jo, a, hi 应该是红色的。到目前为止，我可以通过以下代码实现这一点:

$('#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 样式和在选择标签中使用关键字“required”。但它不会使文本变红，而只会使边框变红。此外，似乎“必需”首先进行验证，如果通过，然后进入 submitHandler，这使得用户体验很差。

如有任何建议，我们将不胜感激。

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

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

我试过了，但没有任何反应。即便如此，我真的不知道如何在无效时将文本设为红色。

Answer 1

试试这段代码:

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