Im having some trouble enabling on-the-fly the client side validation for a custom form I insert in the page dinamycally (ajax request).

My workflow is somehow this:

function mymodule_menu(){
  return array(
    'mymodule/load-form' => array(
        'page callback' => '_mymodule_load_ajax_form',
        'access callback' => true
     )
  );
}


function _mymodule_load_ajax_form(){
   $form = drupal_get_form('mymodule_form_test');
   $html = drupal_render($form);
   drupal_output_json(array('status' => true, 'html' => $html));
}

In my tpl file, I have a button that when clicked call ana ajax request to mymodule/load-form, and insert the form html into the page (the compelte code is a bit more complex, has the server-side validation and stuff)

My problem is that I cant enable (and then, disable when the form get submitted via ajax) the Client Side validation.

I tryed, in my ajax success callback, to dinamycally load all the client side js files:

/sites/all/modules/clientside_validation/jquery-validate/jquery.validate.js
/sites/all/modules/clientside_validation/clientside_validation.ie8.js
/sites/all/modules/clientside_validation/clientside_validation_html5/clientside_validation_html5.js
/sites/all/modules/clientside_validation/clientside_validation.js

I also get the js settings that clientside use and add them to Drupal.settings; After a lot of try, the Drupal.settings is identical to the one you will get rendering the form normally (and not via ajax), but still I cant understand why client side validation does not works.

Any idea?

Comments

jelle_s’s picture

This seems like a "non-Drupal" way to load a page through ajax.

You really should be doing something more like this: (untested code)

function mymodule_menu(){
  return array(
    'mymodule/load-form' => array(
        'page callback' => '_mymodule_load_ajax_form',
        'access callback' => true,
        'delivery callback' => 'ajax_deliver',
     )
  );
}
function _mymodule_load_ajax_form(){
   $form = drupal_get_form('mymodule_form_test');
   $html = drupal_render($form);
   $commands = array();
   $commands[] = ajax_command_insert('#my-wrapper-div', $html);
   return array('#type' => 'ajax', '#commands' => $commands);
}
strae’s picture

@Jelle_S, thanks for the answer, youre totally right..

I'll try to convert my code in "drupal style"

strae’s picture

Status: Active » Closed (works as designed)
strae’s picture

After Jelle_S answer, i tryed to use the Drupal ajax framework to load the form, and I guess I found a bug in clientside validation: when I load the form via ajax, I always get the error "TypeError: j is undefined" in jquery.js?v=1.4.4 (row 33).

Thats happen just after the loading of clientside_validation.js: http://imgur.com/TwqvSmJ

I also tryed to load manually the clientside_validation js in the page, but I get the same error (perhaps somethig needs to be initialized before load them?)

If i disable clientside_validation modules (currently im using fapi and form submodules) the ajax workflow works perfetcly.

This is the simpliest code to reproduce the error:

function mymodule_menu(){
  return array(
    // Standard drupal page rendering a form. As callback, im not udin drupal_get_form directly
    // becose i'll have to do some extra manipulation before render the form.
    'mymodule/form' => array(
      'page callback' => 'mymodule_create_form',
      'access callback' => true
    ),
    // Empty page that
    'mymodule/ajax' => array(
      'page callback' => 'mymodule_ajax_page',
      'access callback' => true
    ),
    'mymodule/ajax/form' => array(
      'delivery callback' => 'ajax_deliver',
      'page callback' => 'mymodule_ajax',
      'access callback' => true,
      'page arguments' => array(2)
    ),
  );
}
/**/

// Return a simple markup, with an ajax element to load the form.
function mymodule_ajax_page(){
  // I also tryed to load manually the clientside validation JS, but I got the same error.
/*
  drupal_add_js(drupal_get_path('module', 'clientside_validation') . '/jquery-validate/jquery.validate.js');
  drupal_add_js(
    drupal_get_path('module', 'clientside_validation') . '/clientside_validation.ie8.js',
    array('scope' => 'footer')
  );
  drupal_add_js(
    drupal_get_path('module', 'clientside_validation') . '/clientside_validation.js',
    array('scope' => 'footer')
  );
*/

  return array(
    '#type' => '#markup',
    '#suffix' => 'suffisso<div id="the-form-here"></div>',
    'links' => array(
      'form-link-load' => array(
        '#type' => 'link',
        '#href' => 'mymodule/ajax/form',
        '#title' => 'Click to load the form!',
        '#ajax' => array(
          'event' => 'click',
          'callback' => 'mymodule_ajax'
        )
      )

    )
  );
}

function mymodule_ajax(){
  $form = drupal_get_form('mymodule_form_test');
  $html = drupal_render($form);
  $commands = array();
  $commands[] = ajax_command_insert('#the-form-here', $html);
  return array('#type' => 'ajax', '#commands' => $commands);
}

/**/
function mymodule_create_form($vals = null){
  $form = drupal_get_form('mymodule_form_test');
  $html = drupal_render($form);
  return $html;
}
/**/


// Create the form
function mymodule_form_test($form, $form_state) {
  $form['field_a'] = array(
    '#type' => 'textfield',
    '#title' => t('Normal validation, required'),
    '#default_value' => '',
    '#size' => 60,
    '#maxlength' => 128,
    '#required' => TRUE,
  );

  $form['field_b'] = array(
    '#type' => 'textfield',
    '#title' => t('Clientside validation, 5-8 chars'),
    '#default_value' => '',
    '#size' => 60,
    '#maxlength' => 128,
    '#rules' => array(
      'length[5, 8]',
    )
  );

  $form['send'] = array(
    '#type' => 'submit',
    "#value" => "SEND THIS TEST",
  );

  return $form;
}
/**/
strae’s picture

Component: Documentation » Form Validation
Category: Support request » Bug report
Status: Closed (works as designed) » Active
strae’s picture

Title: Activate client side validation for a dynamic (ajax) created form? » Activate client side validation for a dynamic (ajax) created form JS error
jelle_s’s picture

Can you try the latest dev again (pull from git or wait 12 hours for d.o to sync). It works for me now with the example code you provided.

strae’s picture

Jelle_S, i'll try tomorrow and tell if it works ;)

p.parshin’s picture

I had the same problem and latest dev-version helped me.
Thanks.

jelle_s’s picture

@Strae: As this fixed @p.parshin's problem, can I assume it fixed yours as well?

strae’s picture

Jelle_S ys, just tryed and now works, sorry but i've been very busy

jelle_s’s picture

Status: Active » Fixed

No problem, thanks for reporting back!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

k.skarlatos’s picture

Sorry for reopening, please tell me if this needs to be in a new issue:

I have a webform, that uses modal forms and does not use clientside validation in that specific form. I get Internal Server Errors after this commit (git bisect results):

fd2ffb7d1b0c389d3f379d9e750b7573d1f1658b is the first bad commit
commit fd2ffb7d1b0c389d3f379d9e750b7573d1f1658b
Author: jelles
Date: Tue Nov 19 16:21:08 2013 +0100

Issue #2136509 by Strae: Activate client side validation for a dynamic (ajax) created form JS error.

:100644 100644 ba3c0a940257b23b06689629d298d67c037fa224 d3589c455e36529d6cf670b6824348814cf890e7 M clientside_validation.module

I also get this message:

Notice: Undefined index: command in clientside_validation_ajax_render_alter() (line 39 of /var/www/clients/client0/web26/web/sites/all/modules/clientside_validation/clientside_validation.module).

k.skarlatos’s picture

Status: Closed (fixed) » Active

  • Jelle_S committed fd2ffb7 on 7.x-2.x
    Issue #2136509 by Strae: Activate client side validation for a dynamic (...
jelle_s’s picture

Can you try version 1.41? This should be fixed.

andriyun’s picture

Commited patch #16 work for full form ajax update.
jquery validate bind to new form id and all work fine.

But if we update part of form elements via ajax validation still don't work

hugronaphor’s picture

Version: 7.x-1.38 » 7.x-2.x-dev
Status: Active » Needs review
StatusFileSize
new2.82 KB

@andriyun is right, if you update a part of your form the the validation will not be triggered because the JS settings are not going to be available for the original Form ID.

Uploading the patch for version 7.x-2.x which is going to ensure the settings are available for the original Form ID.

hugronaphor’s picture

Status: Needs review » Reviewed & tested by the community
khiminrm’s picture

I've faced with error by using patch from #19:
clientside_validation.js?qgno6y:254 Uncaught TypeError: Cannot read property 'errorElement' of undefined

I've updated patch by adding clientside_validation_keep_js_settings(array($form_id => $settings['clientsideValidation']['forms'][$form_id])); at the end of function _clientside_validation_add_general_settings()