Combining form validation and closing the popup window?

Question

How can I make sure that the window doesn't close before the form is valid and properly submited? Because now it closes the popup and nobady knows if the form was valid. Because even iff there are errors the form is immediately closed.

    $(document).ready(function(){

  $(".requestPassword").hide();
  $(".popupwindow").popupwindow(profiles);

  $(".fp").click(function(){
   $(".loginForm").hide();
   $(".requestPassword").show();
  });
  $(".back").click(function(){
   $(".loginForm").show();
   $(".requestPassword").hide();
  });

  //form validation
   $("#aanmeldForm").validate({


    //set the rules for the field names
   rules: {
   firstname: {
   required: true,
   minlength: 2
   },
   email: {
   required: true,
   email: true
   },
   message: {
   required: true,
   minlength: 2
   },
   },
   //set messages to appear inline
   messages: {
   name: "Please enter your name",
   email: "Please enter a valid email address"

   },
   errorPlacement: function(error, element) {
      error.appendTo( element.parent("td"));
   }

   });

   $("#aanmeldForm").submit(function(){
      //TODO: some data keeping jobs to be done
      self.opener.location = 'http://ladosa.com';
      self.close();
     });


});

Answer 1

Check the form is valid, and if it's not, return false; out of the submit:

$("#aanmeldForm").submit(function(){
    //TODO: some data keeping jobs to be done
    // make sure the form was valid *before* dismissing the popup
    if($(this).valid()) {
        self.opener.location = 'http://ladosa.com';
        self.close();
        return true;
    }
    // stop the form submitting
    return false;
});