Today I had the need to create a custom event using jQuery, in order to launch a customized form validation event from a global submit event. I did this so I could focus in on the first form field that had an error. My event from the global.js
script, that is included on every page of IdeaPipe, looks like this:
$("form").submit(function () { var valid = $(this).validate(); // if the form didn't validate then focus the input on the first error if (!valid) $(this).find(":input[error]:first").focus(); return valid; });
This is pretty standard jQuery. What this code above does is set a custom function for the submit event for any <form /> tag on the page. The submit event will only be allowed to continue if a return value of true is returned from the function.
I was able to create this custom jQuery event with the following code:
jQuery.fn.extend({ validate: function (fn) { if (fn) { return jQuery.event.add(this[0], "validate", fn, null); } else { var ret = jQuery.event.trigger("validate", null, this[0], false, null); // if there was no return value then the even validated correctly if (ret === undefined) ret = true; return ret; } } });
There are two different states to this method. Primarily because in JavaScript all parameters are optional for functions. So the two states of this function are:
validate(fn)
- sets the eventvalidate()
- fires the event
An example of setting the event is:
$("form.user-login").validate(function () { var userNameValid = ValidateLoginUserName(); var passwordValid = ValidateLoginPassword(); return userNameValid && passwordValid; });
In this example the form is valid if both the login user name and password validate.
An example of using the event is the same as the method above.
$("form").submit(function () { var valid = $(this).validate(); // do some stuff return valid; });
This may not be the standard bind()
and trigger()
that most jQuery programmers are use to, but I needed an event that would return a value of true or false, so that I my submit event handler knows if it should focus on errors or continue the submit process.
Hope everybody finds this useful.