how to ignore the validation of hidden form fields in the user registration form? 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?
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(&amp;$form, &amp;$form_state, $form_id) {
    if($form_id == 'user_register_form'){

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

        # This field will be shown or hidden when "toggle_me" is checked or unchecked
        $form['dependency'] = array(
          '#type'       =&gt; 'hidden', # initially hidden
          '#title'      =&gt; 'Dependency',
          '#required'   =&gt; TRUE,
          '#prefix'     =&gt; '&lt;div id="replace_field_div"&gt;',
          '#suffix'     =&gt; '&lt;/div&gt;',          
        );
        // 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']) &amp;&amp; $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.