8 - How to run jQuery to show a div, after register form is submitted?

Question

I've looked at this question, but I want a div to be displayed rather than a Drupal Message

After a user successfully submits the user_register_form, I want to call a jQuery function like this:

function showMessage(){
  $('#message-overlay').fadeIn();
}

This is so I can show users that they have to confirm their email address in order to login.

I tried using hook_form_alter like this to display a custom message, but even this does not work...

function MYTHEME_form_alter( &$form, &$form_state, $form_id ) {
  if ( TRUE === in_array( $form_id, array( 'user_register_form') ) ) {
    $form['#submit'][] = 'submitForm';
  }
}

function submitForm(array &$form, FormStateInterface $form_state) {
  drupal_set_message(t('Form Submitted Successfully'), 'status', TRUE);
}

Please advice!

Answer 1

I used like below and it works for me:

function MYMODULE_form_alter( &$form, &$form_state, $form_id ) {
  if ( TRUE === in_array( $form_id, array( 'user_register_form') ) ) {
      foreach (array_keys($form['actions']) as $action) {
        if ($action != 'preview' && isset($form['actions'][$action]['#type']) && $form['actions'][$action]['#type'] === 'submit') {
          $form['actions'][$action]['#submit'][] = '_message_submit';
        }
      }
  }
}
function _message_submit(array &$form, FormStateInterface $form_state) {
  $values = $form_state->getValues();
  drupal_set_message(t('The user @name account has been created successfully.', ['@name' => $values['name']]));
}