Question

I’m trying to check my input fields for values after a user clicks my form button but it’s not getting into the input loop to check required fields. Does this not work with a click event? Here is what I’m calling

$('#submit_button').click(function(){

    var formValid = true;

    $(".required input").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("error_msg");
            formValid = false;
        }
        else{
            $(this).removeClass("error_msg");
        }
    });
    // post form if no errors are seen

});

My input HTML looks like this:

<input class="required" type="text" value="" name="test" id='test_id' size="80"/>

What am I missing? This seems like it should work…

Answer 1

Try

$("input.required")

instead of

$(".required input")

You can submit your form with jQuery submit function:

$('#submit_button').click(function(){

    var formValid = true;

    $("input.required").each(function(){
        if ($.trim($(this).val()).length == 0){
            $(this).addClass("error_msg");
            formValid = false;
        }
        else{
            $(this).removeClass("error_msg");
        }
    });

    if(formValid) $('#yourForm').submit();
    else return false; //if the button is a submit
});