jQuery form validation - Popup on success

Question

I am trying to get a popup to come up when the user clicks "Submit," and everything is valid. This is what I have so far:

$(document).ready(function() {
    $("#aForm").validate({
        debug: false,
        errorPlacement: function(error, element) {
            error.insertBefore(element);
        },
        submitHandler: function(form) {
            $(".success-overlay").show();
            $(".success-message").show();
        },
        rules: {
            firstName: {
                required: true,
                minLength: 1,
                messages: {
                    required: "Please enter your first name",
                    minLength: "Please enter a valid first name"
                }
            },
            lastName: {
                required: true,
                minLength: 1,
                messages: {
                    required: "Please enter your last name",
                    minLength: "Please enter a valid last name"
                }
            },
            email: {
                required: true,
                email: true,
                messages: {
                    required: "Please enter your email address",
                    minLength: "Please enter a valid email address"
                }
            }
        }
    });
});

... but all that happens is it reloads the page and sends me back to the top of the current page. Any advice? Here's the accompanying HTML:

<form class="aForm" id="aForm" method="" action="">
    <div class="personal-info">
        <div class="ie-left"><label class="hide" for="firstName">First name</label><input type="text" name="firstName" id="firstName" placeholder="First name"> <span>*</span></div>
        <div class="ie-middle"><label class="hide" for="lastName">Last name</label><input type="text" name="lastName" id="lastName" placeholder="Last name"> <span>*</span></div>
        <div class="ie-right"><label class="hide" for="email">Email address</label><input type="email" name="email" id="email" placeholder="Email address"> <span>*</span></div>
    </div>
    <p class="required-fields">* Required fields</p>
    <div class="submit-button"><input type="submit" value="Register for Updates"></div>
</form>

<div class="success-overlay"></div>
<div class="success-message">
    <span>X</span>
    <h1>Thank you!</h1>
</div>

Answer 1

The messages are not part of rules value, it is a separate option. Also it is minlength not minLength

    $(document).ready(function () {
        $("#aForm").validate({
            debug: false,
            errorPlacement: function (error, element) {
                error.insertBefore(element);
            },
            submitHandler: function (form) {
                $(".success-overlay").show();
                $(".success-message").show();
                return false;
            },
            rules: {
                firstName: {
                    required: true,
                    minlength: 4
                },
                lastName: {
                    required: true,
                    minlength: 1
                },
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                firstName: {
                    required: "Please enter your first name",
                    minlength: "Please enter a valid first name"
                },
                lastName: {
                    required: "Please enter your last name",
                    minlength: "Please enter a valid last name"
                },
                email: {
                    required: "Please enter your email address",
                    email: "Please enter a valid email address"
                }
            }
        });
    });

.success-overlay, .success-message {
    display: none;
}

<form class="aform" id="aForm" method="" action="">
  <div class="personal-info">
    <div class="ie-left"><label class="hide" for="firstName">First name</label><input type="text" name="firstName" id="firstName" placeholder="First name"> <span>*</span></div>
    <div class="ie-middle"><label class="hide" for="lastName">Last name</label><input type="text" name="lastName" id="lastName" placeholder="Last name"> <span>*</span></div>
    <div class="ie-right"><label class="hide" for="email">Email address</label><input type="email" name="email" id="email" placeholder="Email address"> <span>*</span></div>
  </div>
  <p class="required-fields">* Required fields</p>
  <div class="submit-button"><input type="submit" value="Register for Updates"></div>
</form>

<div class="success-overlay"></div>
<div class="success-message">
  <span>X</span>
  <h1>Thank you.</h1>
</div>