Is it possible to call a function that is nested in another function?

Question

I have created a javascript file that contains the following:

(function ($) {
  //Define a Drupal behaviour with a custom name
  Drupal.behaviors.jarrowDynamicTextfieldValidator = {
    attach: function (context) {
        //Add an eventlistener to the document reacting on the
        //'clientsideValidationAddCustomRules' event.
        $(document).bind('clientsideValidationAddCustomRules', function(event){
            //Add your custom method with the 'addMethod' function of jQuery.validator
            //http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage
            jQuery.validator.addMethod("typeValidator", function(value, element, param) {

             ...bunch of code here...

           }, jQuery.format('Field can not be empty'));
        });
      }
   };
})(jQuery);

What I would like to do is add an change listener to a select box so that when the selection changes it would call this validation function. I am not sure if I can do this since the validation code is buried within several functions. Is this possible?

Yes, you can absolutely do this... In many different ways. Check this out: http://stackoverflow.com/questions/500431/javascript-variable-scope — Matthew Blancarte, Aug 16 '13 at 22:53

score 1 · Answer 1 · answered Aug 16 '13 at 22:58

the way your original code is showing it, no, you wouldn't be able to call any of those functions because they're anonymous and are within the scope of the parent functions.

If you were to declare a variable for the function outside of the function that calls it, then you'd be able to reuse the function, because it will be global to the scope of the other function. Note: if you wanted the variable to be completely global, or rather, have it be accessible no matter where you are in the code, just don't write the var in front of the variable, it will then be "global", which is actually the equivalent of putting the variable within the window namespace.

Here's an example of that, using your code:

(function ($) {

    var customCallback = function(event){
        //Add your custom method with the 'addMethod' function of jQuery.validator
        //http://docs.jquery.com/Plugins/Validation/Validator/addMethod#namemethodmessage
        jQuery.validator.addMethod("typeValidator", function(value, element, param) {

         ...bunch of code here...

       }, jQuery.format('Field can not be empty'));
    };

   //Define a Drupal behaviour with a custom name
   Drupal.behaviors.jarrowDynamicTextfieldValidator = {
      attach: function (context) {
         //Add an eventlistener to the document reacting on the
         //'clientsideValidationAddCustomRules' event.
         $(document).bind('clientsideValidationAddCustomRules', customCallback);
      }
   };

   //now you can use that function again...
   $('#something').on('someEvent', customCallback );

})(jQuery);

Please note that you'll have to make some adjustments to that function to make sure all of your variables are available and things like that due to variable scope. So, this may need some tweaking to make it work for your scenario.

Thanks for another great possible solution to this problem. I will see how I can modify this to fit my situations. Who knew that SO also served as a dating service :-) — user5013, Aug 19 '13 at 16:56

score 1 · Answer 2 · answered Aug 16 '13 at 23:17

Normally you wouldn't be able to call that anonymous function without modifying the code a little, however that seems to be the way of registering custom validation rules for the jQuery Validation Plugin and once registered, you can definitely use that custom rule through the plugin's API.

For instance, the following code adds a custom rule:

jQuery.validator.addMethod("typeValidator", function(value, element, param) {

 ...bunch of code here...

}, jQuery.format('Field can not be empty'));

Now you can initialize the plugin on your form and call the valid function to validate the form.

$('#someForm').validate({
    rules: {
        someField: {
            typeValidator: true //use the custom validation rule
        }
    } 
});

Now you can check if the form is valid using $('#someForm').valid().

Have a look at the plugin's API for more infos.

Thanks for the suggestion. I like this solution as it seems cleaner to me. I will try both this and the other solution just so I can build up my experience with using javascript. Thanks! — user5013, Aug 19 '13 at 16:58

Is it possible to call a function that is nested in another function?

2 Answers2