Need help modifying a form JS script to add a success message

Question

I need help modifying this script to add a success message that would show in a div on the page. If there is a way to hide the submit button as well after the form is submitted, that would be helpful in preventing folks from spamming the submit button over and over again.

$().ready(function() {
    // validate board form choices and submit
    $("#custom_board_form").validate({
        rules: {
            firstname: {
                required: true,
                minlength: 2
            },
            lastname: {
                required: true,
                minlength: 2
            },
            email: {
                required: true,
                email: true
            },
        },
        messages: {
            firstname: {
                required: "Please enter a name",
                minlength: "Your name must consist of at least 2 characters"
            },
            lastname: {
                required: "Please enter a name",
                minlength: "Your name must consist of at least 2 characters"
            },
                email: "Please enter a valid email address",
        },

    });

});

Answer 1

You seem to be using jQuery Validation plugin. Add this to your configuration object:

validate({
  rules: ...
  messages: ...
  submitHandler: function(form) {
    $('#submitButton').prop('disabled', true);
    $('#successMessage').text('Success message!');
    form.submit();
  }
});

(replacing your own elements for the submit button ID and the ID of an empty element that will receive the success message).

EDIT: Oops, wrong hook.