Question

I have a little problem with jQuery:

$('#form-submit').click(function () {

    $('#textarea, #name').removeClass('error-state').addClass('normal-state');

    var myName = $('#name').val();
    var myContent = $('#textarea').val();

    if ( myContent == '' || myName == '')
    {
        $('#textarea, #name').removeClass('normal-state').addClass('error-state');
        return false;
    }

    [more code here]

});   

This code works good for #textarea but doesn’t for #name, I’ve check and re-recheck without find the error.

But, if we add:

$('#name').val('some value');

before return false; change the value but the CSS class still the same.

Any ideas?

Answer 1

Try with:

$('#form-submit').click(function () {

    var arrJEls = $('#textarea, #name');

    arrJEls.each(function(i){
        //See what happens with each element:
        console.log($(this));
        $(this).removeClass('error-state').addClass('normal-state');
    });

    var myName = $('#name').val();
    var myContent = $('#textarea').val();

    if ( myContent == '' || myName == '')
    {
        arrJEls.each(function(i){
            //See what happens with each element:
            console.log($(this));
            $(this).removeClass('normal-state').addClass('error-state');
        });
        return false;
    }

    [more code here]

});