how to ignore the validation of hidden form fields in the user registration form?

Question

I am having a problem regarding the validation of the hidden fields.

I have some some fields that are hidden and only visible if a specific field is selected.

And I marked those those hidden fields as required. So I want to validate those fields only if they are visible and not validate if they are hidden.

I tried the client side validation module but the problem is if I enter the visible required field values then upon submission it also validate those hidden fields.

Any idea?

Answer 1

You need to use #ajax attribute on your specific field to alter the form ( to remove #required for your hidden element ). It lets Drupal re-build the form before submission and core validation. You will need to implement hook_form_alter and an ajax callback function.

Here is a workaround.

function yourmodule_form_alter(&$form, &$form_state, $form_id) {
    if($form_id == 'user_register_form'){

        $form['toggle_me'] = array(
            '#type' => 'checkbox',
            '#title' => t('Tick this box to type'),
            '#ajax' => array(
              // #ajax has two required keys: callback and wrapper.
              // 'callback' is a function that will be called when this element changes.
              'callback' => 'ajax_form_alter',
              // 'wrapper' is the HTML id of the page element that will be replaced.
              'wrapper' => 'replace_field_div',
              // Don't show any throbber...
              'progress' => array('type' => 'none'),              
             ),
        );

        # This field will be shown or hidden when "toggle_me" is checked or unchecked
        $form['dependency'] = array(
          '#type'       => 'hidden', # initially hidden
          '#title'      => 'Dependency',
          '#required'   => TRUE,
          '#prefix'     => '<div id="replace_field_div">',
          '#suffix'     => '</div>',          
        );
        // An AJAX request calls the form builder function for every change.
        // We can change how we build the form based on $form_state.        
        if(isset($form_state['values']['toggle_me']) && $form_state['values']['toggle_me'] == 1){
            # when "toggle_me" is checked, show this field and set required.
            $form['dependency']['#type'] = 'textfield'; 
            $form['dependency']['#required'] = TRUE;    
        }else{ 
            # when "toggle_me" is unchecked, hide this field and remove required.
            $form['dependency']['#type'] = 'hidden';    
            $form['dependency']['#required'] = FALSE;           
        }
    }
}
/**
 * Callback for toggle_me
 *
 * On an ajax submit, the form builder function is called again, then the $form
 * and $form_state are passed to this callback function so it can select which
 * portion of the form to send on to the client.
 *
 * @return renderable array (the textfield element)
 */     
function ajax_form_alter($form, $form_state){
    return $form['dependency']; 
}

The example shows only two new elements ( toggle_me and dependency ) which are added to user registration form using hook_form_alter. When "toggle_me" is checked, show "dependency" and set required. When "toggle_me" is unchecked, hide "dependency" and remove required.
If you don't know about ajax form alter, download examples module and check ajax example.

Answer 2

Specify the conditions under which the field is required using drupal_process_states(). There's a UI for it, called Conditional Fields, but it does not have a recommended release yet.