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>
4 Antworten
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: {}
};
Dies verursacht das Problem:
O.form=function
Jetzt hat form keine voting Eigenschaft mehr.
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
}
}
});
});
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.