Unable to check required fields with click event

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=开发者_StackOverflow社区"required" type="text" value="" name="test" id='test_id' size="80"/>

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

---

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
});

---

Use $('input.required') instead. If you use $('.required input'), it will then look for any input element, inside the .required class. Which in this case, there would be none.

---

You need to use event.preventDefault() to prevent the form submission.