Question

I have the function that checks if a container has invalid form fields. If it has then to the link, which is showing particular container, ‘hasErrors’ class is being added.

function treatFormLinks () {
    if (!$('#One .required').valid() ) {
        $('#LinkOne').addClass('hasErrors');    
    }
    if (!$('#Two .required').valid() ) {
        $('#LinkTwo').addClass('hasErrors');    
    }
    if (!$('#Three .required').valid() ) {
        $('#LinkThree').addClass('hasErrors');  
    }
};

$("#Submit").click(function () {
    treatFormLinks();
});

It works fine but problem appears if container #Two fields are valid but container #Three fields have some errors. In this case ‘hasErrors’ class is not added to #LinkThree.

I understand that there is problem in the logic in this function, but how would I say browser to keep checking those containers until they all are checked.

Stupid problem, I know, but need help anyway 🙂

Answer 1

Well, my mistake was not obvious at all and here’s how I fixed this. I replaced

!$('#One .required').valid()

with this

!$('#One input, #One select, #One textarea').valid()

in each case and now it’s working as I expected.