How to create a non-Native jQuery event

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 event
  • validate() - 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.

Nick Berardi

Entrepreneur, Microsoft MVP, ASPInsider, co-founder and CTO of @CaddioApp, Father, and @SeriouslyOpen host