Question

I’m doing a simple jQuery form checker for a website. I have two forms on the website: a login form and a signup form. My code is as followed:

$('.btn').click(function(e) {
    e.preventDefault();
    // DOES SOME ERROR CHECKING HERE
    if { hasError $('div.error').fadeIn() }

    else { $(this).parents('form').submit() }
});

So my question is, both the login button and the signup button has a class called btn, how can I have the them check and submit their own form instead of checking all the forms on the page since $(this).parents(‘form’) will get both the signup and login form?

Thank you!

Answer 1

Change your HTML form structure so that when when you click either button, you are able to select the corresponding form.

<form action="get">
    <input type="text" value="1" />
    <input type="button" class="btn" />
</form>

<form action="get">
    <input type="text" value="1" />
    <input type="button" class="btn" />
</form>

And jQuery:

$(function(){
    $(".btn").click(function(){
        $(this).closest("form").submit();
    });
});

EDIT

A better selector for your error handling

$(this).closest('form').find('.required').each(function(){
});

http://jsfiddle.net/c9GXZ/6/