prevent form submission if validation failed after iterating over each form element with jquery's .each() function

Question

I have the following code in which I\'m trying to iterated over html text input elements, do some validation and prevent the form submission if the validation fails:

Answer 1

Your return false; is from within the callback function for $.each() (which makes it break at that iteration) and not from the submit handler (which would stop the form submission). This should do the trick:

$("#the_form").submit(function(){
    var isValid = true;
    $(":text", this).each(function(){                    
        if($(this).val().length != 0)
        {                            
            var str = $(this).val();
            str = $.trim($(this).val());
            $(this).val(str);
            if($(this).val().length < 4)
            {
                alert("You should enter at least 4 characters");
                $(this).focus();
                isValid = false;
                return false;
            }
        }                 
    }) // end of each() function
    return isValid;
})