Hi, thanks for this module.

It works great for my test form. But I have a form, which contains ajax triggered form. It seems this module doesn't work with the triggered form by ajax?

For example,

  $options_connection = agl_jira_get_issuetype_field_options();
  $form['issuetype_field'] = array(
    '#title' => t('New Connection Requested'),
    '#type' => 'select',
    '#options' => $options_connection,
    '#required' => TRUE,
    '#default_value' => isset($form_state['values']['issuetype_field']) ? $form_state['values']['issuetype_field'] : NULL,
    '#disabled' => $disabled,
    '#ajax' => array(
      'callback' => 'agl_jira_ajax_issuetype_field',
      'wrapper' => 'secondary-form-wrapper',
    ),
  );

  // Setting wrapper element to pass secondary form via ajax.
  $form['secondary_form'] = array(
    '#markup' => '<div id="secondary-form-wrapper"></div>',
  );

  if (!$form_state['values']['issuetype_field']) {
    return $form;
  }

  // Store the issue id, which will be used later.
  if (isset($form_state['values']['issuetype_field'])) {
    $issue_id = $form_state['values']['issuetype_field'];
  }
  else {
    $issue_id = '_none';
  }

  // Changing secondary form to use proper markup, overwriting simple markup set above.
  $form['secondary_form'] = array(
    '#type' => 'fieldset',
    '#attributes' => array('id' => 'secondary-form'),
    '#prefix' => '<div id="secondary-form-wrapper">',
    '#suffix' => '</div>',
  );

  // Your Information region.
  $form['secondary_form']['your_information'] = array(
    '#title' => t('Your Information'),
    '#type' => 'fieldset',
    '#collapsible' => TRUE,
  );
  $form['secondary_form']['your_information']['customfield_11613'] = array(
    '#title' => t('Name'),
    '#type' => 'textfield',
    '#required' => TRUE,
    '#default_value' => isset($form_state['values']['customfield_11613']) ? $form_state['values']['customfield_11613'] : NULL,
    '#maxlength' => 254,
    '#disabled' => $disabled,
  );

So you can see, when this form is viewed in the first time, it doesn't show field 'customfield_11613', but when "issuetype_field" is slelected, the ajax call will render field 'customfield_11613'.

This module works greatly with field "issuetype_field", becuase this field is required. But it doesn't work with field 'customfield_11613'. I guess maybe this field 'customfield_11613' is rendered in the ajax call, so this module doesn't work on it?

Thanks!

Comments

smiletrl’s picture

smiletrl CreditAttribution: smiletrl commented

I can confirm this issue, with following test code

function agl_jira_new_test_form($form, $form_state) {
  $form['textfield'] = array(
    '#title' => t('name'),
    '#type' => 'textfield',
    '#required' => TRUE,
  );
  $options = array('man' => 'man', 'women' => 'women');
  $form['selectfield'] = array(
    '#title' => t('sex'),
    '#type' => 'select',
    '#options' => $options,
    '#required' => TRUE,
    '#ajax' => array(
      'callback' => 'agl_jira_ajax_test',
      'wrapper' => 'agl-jira-test-wrapper',
    ),
  );
  $form['testme'] = array(
    '#markup' => '<div id="agl-jira-test-wrapper"></div>',
  );
  if (isset($form_state['values']['selectfield']) && $form_state['values']['selectfield'] == 'women') {
    
    $form['testme'] = array(
      '#title' => t('test ajax validation'),
      '#type' => 'fieldset',
      '#prefix' => '<div id="agl-jira-test-wrapper">',
      '#suffix' => '</div>',
    );
    $form['testme']['email'] = array(
      '#title' => t('email'),
      '#type' => 'textfield',
      '#rules' => array('email'),
      '#required' => TRUE,
    );
  }
  $form['submit'] = array(
    '#type' => 'submit',
    '#value' => t('submit'),
  );

  return $form;
}

function agl_jira_ajax_test($form, $form_state) {
  return $form['testme'];
}

function agl_jira_new_test_form_submit($form, $form_state) {
  // do something.
}

Steps to reproduce:

  1. Add above code for a new custom menu;
  2. Open this new menu path. 'name' field is working with client side validation.
  3. Select "women" for 'sex' field. The new field 'email' doesn't work with this module, and field 'name' doesn't work with this module either.
smiletrl’s picture

smiletrl CreditAttribution: smiletrl commented

Interesting, when the form is rebuilt, clientside module still works on it.

Add rebuild in submit function

function agl_jira_new_test_form_submit($form, &$form_state) {
  // do something.
  $form_state['rebuild'] = TRUE;
}

Submit this form. This form will be rebuilt, and it works well with client side validation.

smiletrl’s picture

smiletrl CreditAttribution: smiletrl commented

Ok, I just tried to use this validate plugin directly. It works for the test form above. Here's the code for someone who is facing the same problem with me:

            $('#agl-jira-new-test-form').validate({
              rules: {
                textfield: {
                  required: true,
                  email: true,
                },
                selectfield: "required",
                email: {
                  required: true,
                  email: true,
                }
              }
            });

This code inside drupal behavior will be triggered for this selected form. 'email' field will be validated too.

Get back to this module, I feel the problem is probably at Drupal.clientsideValidation.prototype.bindForms, in clientside_validation.js, line 193. After ajax call, the email field's rule is not found. Maybe form still represents old form elements. The 'context' should already include the new elements in behavior, so I'm not sure why this form is not updated.