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:
- /**
- * Html5 Validator plugin.
- */
- (function($) {
- [...]
- /**
- * Binds the given form event to the form.
- *
- * @property {Function} _addFormEvent
- * @param {String} evt
- */
- _addFormEvent: function(evt) {
- console.log("_addFormEvent called");
- if (evt) {
- var that = this;
- this.element.bind(evt+"."+this.widgetEventPrefix, function() {
- console.log("form event triggered");
- return that.validateForm();
- });
- console.log("form event bound: "+evt+"."+this.widgetEventPrefix);
- }
- return this;
- },
- /**
- * Binds the given input event to the inputs.
- *
- * @property {Function} _addInputEvent
- * @param {String} evt
- */
- _addInputEvent: function(evt) {
- console.log("_addInputEvent called");
- if (evt) {
- var that = $.extend(true, {}, this);
- this.element
- .find("input, select, textarea")
- .bind(evt+"."+this.widgetEventPrefix, function() {
- console.log("input event triggered");
- that.element = $(this);
- return that.validateField();
- });
- console.log("input event bound: "+evt+"."+this.widgetEventPrefix);
- }
- return this;
- },
- /**
- * Creates the validator instance and binds the events (with proper
- * namespace) to the form and inputs, but first it checks if the selected
- * element is actually a form or form element
- *
- * @property {Function} _create
- */
- _create: function() {
- console.log("_create called");
- if (!this.element.is("form")) {
- this.element = this.element.closest("form");
- if (0 == this.element.length) {
- $.error("_init: The HTML5 Validator plugin can be used only on forms or on elements within forms");
- }
- }
- // removes and rebinds events
- this._removeFormEvent()
- ._removeInputEvent()
- ._addFormEvent(this.options.formEvent || false)
- ._addInputEvent(this.options.inputEvent || false);
- // binds html5 checkValidity to the plugin method
- if (this.element[0].checkValidity) {
- delete this.element[0].checkValidity;
- // this.element[0].checkValidity = $.proxy(this.validateForm, this);
- this.element[0].checkValidity = null;
- }
- // a function that returns false
- var retFalse = function() {
- return false;
- }
- // for each form element, if that element has the "validity" property
- // binds the retFalse function to the oninvalid event
- this.element.find("input, select, textarea").each(function() {
- if (this.validity) {
- this.oninvalid = retFalse;
- }
- });
- },
- /**
- * Removes the events bound to the form by this plugin.
- *
- * @property {Function} _removeFormEvent
- */
- _removeFormEvent: function(evt) {
- console.log("_removeFormEvent called");
- this.element.unbind("."+this.widgetEventPrefix);
- return this;
- },
- [...]
- })(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/