highlighted input field on validation failure

Question

i have three dropdown field i want to highlight that three fields after validation failure,but after validation only one field highlighted and after selecting that field form submit, for other two fields script not work

$("#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();
    }

});

Answer 1

Try something like this:

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

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

For every <select> element put a data-default-value attribute with the value of the default value, and... it's done with five lines instead of 20 !