验证失败时突出显示输入字段

时间:2012-04-17 11:54:17

标签: php javascript jquery

我有三个下拉字段我想强调验证失败后的三个字段,但验证后只突出显示一个字段,选择该字段表单提交后,其他两个字段脚本无法正常工作

$("#inputSubmit").click(function(){

    var pColor = $("#select").val();
    var pSize = $("#select2").val();
    var pQuantity = $("#select3").val();


    if((pColor == '') || (pColor == 'color')) 
    {

        $("#select").css("border-color", "red");
        $("#error").show();

    } 
    if((pSize == '') || (pSize == 'size')) 
    {
        alert(1);
        $("#select2").css("border-color", "red");

    }

   if((pQuantity = '') || (pQuantity == 'quantity')) 
    {
        $("#select3").css("border-color", "red");
    }

    if( (pColor != 'color') && (pSize != 'size') && (pQuantity != 'quantity'))
    {       

        $("#InputForm").submit();
    }

});

1 个答案:

答案 0 :(得分:1)

尝试这样的事情:

var isValid = $('select').filter(function() {
    return !this.value || this.value == $(this).data('default-value');
}).css("border-color", "red").length​ == 0;

if (isValid)
    $("#InputForm").submit();

对于每个<select>元素,将data-default-value属性设置为默认值的值,并且...... 使用五行代替20