I'd like to make an object that whose first property is a function that determines which child object the parent object accesses. My specific application is changing the type of form validation used depending on what type of form is being submitted.

The error message i'm getting on page load is: Uncaught TypeError: Cannot set property 'validate' of undefined

Here's my Javascript so far (here's the JSfiddle: / ):

var O={
  form:{
    voting:{
        validate: {}, success: {}
    },
    delete:{
        validate: {}, success: {}
    }
  }
};

O.form=function(formType){
  if(formType=='voting'){
    return O.form.voting;
  }
    else if(formType=='delete'){
    return O.form.delete;
  }
}

THE LINE DIRECTLY BELOW IS CAUSING THE ERROR

O.form.voting.validate=function($form){ //**THIS LINE IS CAUSING THE ERROR**
  if($form.validate().form()){ // this is a method from the jQuery validate plugin
    console.log('YES validates');
  }
  else {
    console.log('NOT valid'); return false;
  }   
}

$('input[type=submit]').click(function(){
  var formType=$(this).data('form-type'),
      $form=$(this).closest('form'),
      formType=O.form(formType);
      console.log('form type is:'+formType);
      formType($form); //this should call the O.form.voting.validate method
}); 

HTML:

<form>
  <input type="submit" data-form-type='voting' name='voting' value="1">
</form>

<form>
  <input type="submit" data-form-type='delete' name='delete' value="1">
</form>

I'd like to make an object that whose first property is a function that determines which child object the parent object accesses. My specific application is changing the type of form validation used depending on what type of form is being submitted.

The error message i'm getting on page load is: Uncaught TypeError: Cannot set property 'validate' of undefined

Here's my Javascript so far (here's the JSfiddle: http://jsfiddle/WJRwv/3/ ):

var O={
  form:{
    voting:{
        validate: {}, success: {}
    },
    delete:{
        validate: {}, success: {}
    }
  }
};

O.form=function(formType){
  if(formType=='voting'){
    return O.form.voting;
  }
    else if(formType=='delete'){
    return O.form.delete;
  }
}

THE LINE DIRECTLY BELOW IS CAUSING THE ERROR

O.form.voting.validate=function($form){ //**THIS LINE IS CAUSING THE ERROR**
  if($form.validate().form()){ // this is a method from the jQuery validate plugin
    console.log('YES validates');
  }
  else {
    console.log('NOT valid'); return false;
  }   
}

$('input[type=submit]').click(function(){
  var formType=$(this).data('form-type'),
      $form=$(this).closest('form'),
      formType=O.form(formType);
      console.log('form type is:'+formType);
      formType($form); //this should call the O.form.voting.validate method
}); 

HTML:

<form>
  <input type="submit" data-form-type='voting' name='voting' value="1">
</form>

<form>
  <input type="submit" data-form-type='delete' name='delete' value="1">
</form>

• javascript
• jquery
• json
• prototype

Share Improve this question Follow asked Oct 9, 2012 at 15:25 tim petersontim peterson 24.4k6363 gold badges185185 silver badges303303 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

The problem is you previously overwrote o.form with a function, so o.form.voting (along with the other stuff you intially set up) no longer exists.

Your O.form object literal is being overwritten by the O.form function. Instead...

var O = {
  form: function(formType) {
    if(formType=='voting'){
      return O.form.voting;
    }
      else if(formType=='delete'){
      return O.form.delete;
    }
  }
};

O.form.voting = {
  validate: {}, success: {}
};
O.form.delete = {
  validate: {}, success: {}
};

This is causing the problem:

O.form=function

Now form no longer has a voting property.

What you could do instead is create a function that maps forms to validator settings, jQuery validator allows a validator per form and will work out which validator to use when the form is submitted...

Updated HTML...

<form data-form-type="voting">
  <input type="submit" name="voting" value="1"/>
</form>

<form data-form-type="delete">
  <input type="submit" name="delete" value="1"/>
</form>

Updated JS...

var o = {};
o.setFormValidations = function(types) {
    // Loop through forms and attempt to map each form to an item in the passed
    // types argument
    $("form").each(function() {
        // Get the form type from the data attribute
        var type = $(this).data("form-type");
        // Add in the validator if there is a matching item in the passed
        // types arguments
        if(types[type]) {
            $(this).validate(types[type]);
        }
    });
};

// On document ready we run the function passing in the jQuery validator
// settings for each form type
$(function() {
    namespace.setFormValidations({
        "voting" : {
            rules: {},
            messages: {},
            submitHandler: function() {
                // Do something for a valid form
            }
        },
        "delete" : {
            rules: {},
            messages: {},
            submitHandler: function() {
                // Do something for a valid form
            }
        }
    });
});