jQuery Forum

Hi everybody =)

I'm trying to create my first jquery plugin, not 'cause we really need it but it's just a test for my own ability.

I've chosen to try to create a form validator tool, similar to the one proposed by http://flowplayer.org/tools/ but with some extra capabilities, like the capability to keep different configuration to multiple forms in the same page.

Here is the current code:

1. /**
2.  * Html5 Validator plugin.
3.  */
4. (function($) {
5.       [...]
6.         /**
7.          * Binds the given form event to the form.
8.          *
9.          * @property {Function} _addFormEvent
10.          * @param {String} evt
11.          */
12.         _addFormEvent: function(evt) {
13.             console.log("_addFormEvent called");
14.             if (evt) {
15.                 var that = this;
16.                 this.element.bind(evt+"."+this.widgetEventPrefix, function() {
17.                     console.log("form event triggered");
18.                     return that.validateForm();
19.                 });
20.                 console.log("form event bound: "+evt+"."+this.widgetEventPrefix);
21.             }
22.             return this;
23.         },
24.         /**
25.          * Binds the given input event to the inputs.
26.          *
27.          * @property {Function} _addInputEvent
28.          * @param {String} evt
29.          */
30.         _addInputEvent: function(evt) {
31.             console.log("_addInputEvent called");
32.             if (evt) {
33.                 var that = $.extend(true, {}, this);
34.                 this.element
35.                     .find("input, select, textarea")
36.                         .bind(evt+"."+this.widgetEventPrefix, function() {
37.                             console.log("input event triggered");
38.                             that.element = $(this);
39.                             return that.validateField();
40.                         });
41.                 console.log("input event bound: "+evt+"."+this.widgetEventPrefix);
42.             }
43.             return this;
44.         },
45.         /**
46.          * Creates the validator instance and binds the events (with proper
47.          * namespace) to the form and inputs, but first it checks if the selected
48.          * element is actually a form or form element
49.          *
50.          * @property {Function} _create
51.          */
52.         _create: function() {
53.             console.log("_create called");
54.             if (!this.element.is("form")) {
55.                 this.element = this.element.closest("form");
56.                 if (0 == this.element.length) {
57.                     $.error("_init: The HTML5 Validator plugin can be used only on forms or on elements within forms");
58.                 }
59.             }
60.             // removes and rebinds events
61.             this._removeFormEvent()
62.                 ._removeInputEvent()
63.                 ._addFormEvent(this.options.formEvent || false)
64.                 ._addInputEvent(this.options.inputEvent || false);
65.             // binds html5 checkValidity to the plugin method
66.             if (this.element[0].checkValidity) {
67.                 delete this.element[0].checkValidity;
68. //                this.element[0].checkValidity = $.proxy(this.validateForm, this);
69.                 this.element[0].checkValidity = null;
70.             }
71.             // a function that returns false
72.             var retFalse = function() {
73.                 return false;
74.             }
75.             // for each form element, if that element has the "validity" property
76.             // binds the retFalse function to the oninvalid event
77.             this.element.find("input, select, textarea").each(function() {
78.                 if (this.validity) {
79.                     this.oninvalid = retFalse;
80.                 }
81.             });
82.         },
83.         /**
84.          * Removes the events bound to the form by this plugin.
85.          *
86.          * @property {Function} _removeFormEvent
87.          */
88.         _removeFormEvent: function(evt) {
89.             console.log("_removeFormEvent called");
90.             this.element.unbind("."+this.widgetEventPrefix);
91.             return this;
92.         },
93.       [...]
94. })(jQuery);

the problem is that the submit event doesn't get called, at least not under firefox 5.0 or chrome 12, but I do not understand why, and perhaps you can help me?

Regards,
Matteo

EDIT: full code with example http://jsfiddle.net/EmH37/