Question

So this validation thing I wrote works but for some reason I need to click twice for the form to submit. Any ideas?

        $('#signup').submit(function() {
        console.log('Clicked');
    $('#signup').validate({
            rules: {
    FNAME: {
        required: true,
        notPlaceholder: true
    },
    email: {
        required: true,
        notPlaceholder: true,
        email: true
    }
},
        errorLabelContainer: "div.error",
        submitHandler: function(form) {
            $.colorbox({width:"300px", href:'thankyou.html'});
            $('#signup').fadeOut();
        }
    });
    return false;
});

thanks

Answer 1

Your $('#signup').validate call is inside $('#signup').submit, which means the validator isn’t attached until the first time the user tries to submit the form. As Cybernate pointed out in a comment, moving the validate call before the submit call will attach the validator first.

It’s a little confusing; validate actually sets up validation, rather than performs it right away.

Once validation has been set up using validate, you can actually change your submit call to look like this:

$('#signup').submit(function() {
  return $('#signup').valid();
});