Question

I have this code, that makes all input fields named “inputix” having a red border if there is one empty, i would like to change only the ones that are empty:

html part http://pastebin.com/4kyv8dLD

for (i=0;i<required.length;i++) {
    var input = $('#'+required[i]);
    if ((input.attr('value') === "") || (input.val() === emptyerror)) {
        input.addClass("needsfilled");
    } else {
        input.removeClass("needsfilled");
    }
}

if (!/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
    email.addClass("needsfilled");
    email.val(emailerror);
}


if ($(":input").hasClass("needsfilled")) {
    i=0;
    $('.inputix').css('border','solid 1px red');
    for (i=0; i<5; i++){
        $('.inputix'+[i]).css('border','solid 1px red');
    }
    return true;
}

The problem is that only want the empty ones to get red borders…

Answer 1

there is no need to use a for loop, you can use start with selector:

Selects elements that have the specified attribute with a value beginning exactly with a given string.

$('input[class^="inputix"]').css('border','solid 1px red')

as an alternative you can use an each loop:

$('form').submit(function(){
    $('input').each(function(){
        if (this.value == '') {
           $(this).addClass('error')
        } else {
            $(this).removeClass('error')  
        }
    })

    if ($('input.error').length > 0) {
        return false
    }           
})

DEMO