Ich möchte ein Objekt erstellen, dessen erste Eigenschaft eine Funktion ist, die bestimmt, auf welches untergeordnete Objekt das übergeordnete Objekt zugreift. Meine spezifische Bewerbung ändert die Art der verwendeten Formularvalidierung in Abhängigkeit davon, welche Art von Formular eingereicht wird.

Die Fehlermeldung, die beim Laden der Seite angezeigt wird, lautet: Uncaught TypeError: Cannot set property 'validate' of undefined

Hier ist mein Javascript bis jetzt (hier ist die JSfiddle: http://jsfiddle.net/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;
  }
}

DIE LINIE DIREKT UNTEN VERURSACHT DEN FEHLER

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>
3
tim peterson 9 Okt. 2012 im 19:25

4 Antworten

Beste Antwort

Ihr O.form Objektliteral wird von der Funktion O.form überschrieben. Stattdessen...

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: {}
};
1
Stuart Wakefield 9 Okt. 2012 im 15:32

Dies verursacht das Problem:

O.form=function

Jetzt hat form keine voting Eigenschaft mehr.

1
cammil 9 Okt. 2012 im 15:30

Sie können stattdessen eine Funktion erstellen, die Formulare den Validatoreinstellungen zuordnet. Der jQuery-Validator ermöglicht einen Validator pro Formular und ermittelt, welcher Validator beim Senden des Formulars verwendet werden soll.

HTML aktualisiert ...

<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>

JS aktualisiert ...

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
            }
        }
    });
});
0
Stuart Wakefield 9 Okt. 2012 im 16:06

Das Problem ist, dass Sie zuvor o.form mit einer Funktion überschrieben haben, sodass o.form.voting (zusammen mit den anderen Dingen, die Sie ursprünglich eingerichtet haben) nicht mehr vorhanden ist.

4
prodigitalson 9 Okt. 2012 im 15:29