How to add validation on 'next' button using fieldgroup module

Question

I am creating a multiple page registration form using the field group module and I want to add validation on 'next' and 'previous' buttons.

If the first page's field is empty, the user can not go to next page they show some alert or message. I am using jquery but not successful with it.

Answer 1

1. Create own module and add

   function MY_MODULE_form_alter(&$form, $form_state, $form_id) {

     if ($form_id == "FORM_ID") {
           $path = drupal_get_path('module', 'MY_MODULE');
           drupal_add_js($path . '/validations.js');   
       }
   }
   

2. Create validations.js file to the MY_MODULE folder and put this there

   (function ($) { Drupal.multipageControl.prototype.nextPage = function() {

           // Group check here, otherwise every pages required fields invoke error.
           if (this.wrapper.hasClass('GROUP-NAME')) {
          $('input.required').each(function(index) { 
           $(this).rules("add", 
               { required:true, messages: { required: "field is required."} }
           );      
       });
   
   
   validated = 1;
   
   $('input.required').each(function(index) {
                   // You might want $("#YOUR-FORM-ID") here instead of just form.
       if (!$("form").validate().element(this))
           validated = 0;
   });
   }
   
   if (validated == 1) 
       this.wrapper.next().data('multipageControl').focus();
   else
       $('html, body').animate({scrollTop:0}, 'slow'); 
   

   } })(jQuery);

This actually checks all fields in your form that are required.

Answer 2

You can use Field Group Ajaxified Multipage module plus Inline Form Errors, it should work.

The most important code is:

  $form['actions']['next'] = array(
    '#type' => 'submit',
    '#value' => t('Next step'),
    '#submit' => array('_field_group_ajaxified_multipage_form_submit'),
    '#ajax' => array(
      'wrapper' => $wrapper_id,
      'callback' => '_field_group_ajaxified_multipage_form_callback',
    ),
  );
}
if ($step > 1) {
  $form['actions']['prev'] = array(
    '#type' => 'submit',
    '#value' => t("Previous step"),
    // Since all info will be discarded, don't validate on 'prev'.
    '#limit_validation_errors' => array(),
    // #submit is required to use #limit_validation_errors
    '#submit' => array('_field_group_ajaxified_multipage_form_submit'),
    '#ajax' => array(
      'wrapper' => $wrapper_id,
      'callback' => '_field_group_ajaxified_multipage_form_callback',
    ),
  );

Alternatively use: Clientside Validation module (see: Clientside Validation Code Examples).

Check also the outstanding ticket for Field Group module: Validation per multipage for some other ideas.

See also Drupal tutorial: Ten Step-by-Step Code Samples for Learning Form API - especially: Basic form with button validation and Multistep form