Skip to content

Instantly share code, notes, and snippets.

@beccasaurus

beccasaurus/README.markdown

Created May 5, 2011 19:37
Download ZIP

Revisions

  1. remi Taylor revised this gist May 5, 2011. 1 changed file with 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions README.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -27,8 +27,10 @@ $(document).ready(function(){
    // we're assuming that this has already been run (which MVC3 does automatically)
    // $('form').validate();

    // running this overrides some jQuery Validate stuff so we can hook into its validations
    $('form').addTriggersToJqueryValidate();
    // running this overrides some jQuery Validate stuff so we can hook into its validations.
    // triggerElementValidationsOnFormValidation is optional and will fire off all of your
    // element validations WHEN the form validation runs ... it requires jquery.validate.unobtrusive
    $('form').addTriggersToJqueryValidate().triggerElementValidationsOnFormValidation();

    // You can bind to events that the forms/elements trigger on validation
    $('form').bind('formValidation', function(event, element, result) {
  2. remi Taylor revised this gist May 5, 2011. 1 changed file with 115 additions and 111 deletions.
    226 changes: 115 additions & 111 deletions jquery.validate.hooks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,121 +1,125 @@
    $.fn.addTriggersToJqueryValidate = function() {
    (function($) {

    // Loop thru the elements that we jQuery validate is attached to
    // and return the loop, so jQuery function chaining will work.
    return this.each(function(){
    var form = $(this);

    // Grab this element's validator object (if it has one)
    var validator = form.data('validator');

    // Only run this code if there's a validator associated with this element
    if (! validator)
    return;

    // Only add these triggers to each element once
    if (form.data('jQueryValidateTriggersAdded'))
    return;
    else
    form.data('jQueryValidateTriggersAdded', true);

    // Override the function that validates the whole form to trigger a
    // formValidation event and either formValidationSuccess or formValidationError
    var oldForm = validator.form;
    validator.form = function() {
    var result = oldForm.apply(this, arguments);
    var form = this.currentForm;
    $(form).trigger((result == true) ? 'formValidationSuccess' : 'formValidationError', form);
    $(form).trigger('formValidation', [form, result]);
    return result;
    };

    // Override the function that validates the whole element to trigger a
    // elementValidation event and either elementValidationSuccess or elementValidationError
    var oldElement = validator.element;
    validator.element = function(element) {
    var result = oldElement.apply(this, arguments);
    $(element).trigger((result == true) ? 'elementValidationSuccess' : 'elementValidationError', element);
    $(element).trigger('elementValidation', [element, result]);
    return result;
    };
    });
    };

    /* Below here are helper methods for calling .bind() for you */

    $.fn.extend({

    // Wouldn't it be nice if, when the full form's validation runs, it triggers the
    // element* validation events? Well, that's what this does!
    //
    // NOTE: This is VERY coupled with jquery.validation.unobtrusive and uses its
    // element attributes to figure out which fields use validation and
    // whether or not they're currently valid.
    //
    triggerElementValidationsOnFormValidation: function() {
    return this.each(function(){
    $(this).bind('formValidation', function(e, form, result){
    $(form).find('*[data-val=true]').each(function(i, field){
    if ($(field).hasClass('input-validation-error')) {
    $(field).trigger('elementValidationError', field);
    $(field).trigger('elementValidation', [field, false]);
    } else {
    $(field).trigger('elementValidationSuccess', field);
    $(field).trigger('elementValidation', [field, true]);
    }
    });
    });
    });
    },

    formValidation: function(fn) {
    return this.each(function(){
    $(this).bind('formValidation', function(e, element, result){ fn(element, result); });
    });
    },

    formValidationSuccess: function(fn) {
    return this.each(function(){
    $(this).bind('formValidationSuccess', function(e, element){ fn(element); });
    });
    },
    $.fn.addTriggersToJqueryValidate = function() {

    formValidationError: function(fn) {
    // Loop thru the elements that we jQuery validate is attached to
    // and return the loop, so jQuery function chaining will work.
    return this.each(function(){
    $(this).bind('formValidationError', function(e, element){ fn(element); });
    var form = $(this);

    // Grab this element's validator object (if it has one)
    var validator = form.data('validator');

    // Only run this code if there's a validator associated with this element
    if (! validator)
    return;

    // Only add these triggers to each element once
    if (form.data('jQueryValidateTriggersAdded'))
    return;
    else
    form.data('jQueryValidateTriggersAdded', true);

    // Override the function that validates the whole form to trigger a
    // formValidation event and either formValidationSuccess or formValidationError
    var oldForm = validator.form;
    validator.form = function() {
    var result = oldForm.apply(this, arguments);
    var form = this.currentForm;
    $(form).trigger((result == true) ? 'formValidationSuccess' : 'formValidationError', form);
    $(form).trigger('formValidation', [form, result]);
    return result;
    };

    // Override the function that validates the whole element to trigger a
    // elementValidation event and either elementValidationSuccess or elementValidationError
    var oldElement = validator.element;
    validator.element = function(element) {
    var result = oldElement.apply(this, arguments);
    $(element).trigger((result == true) ? 'elementValidationSuccess' : 'elementValidationError', element);
    $(element).trigger('elementValidation', [element, result]);
    return result;
    };
    });
    },
    };

    formValidAndInvalid: function(valid, invalid) {
    return this.each(function(){
    $(this).bind('formValidationSuccess', function(e, element){ valid(element); });
    $(this).bind('formValidationError', function(e, element){ invalid(element); });
    });
    },
    /* Below here are helper methods for calling .bind() for you */

    elementValidation: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidation', function(e, element, result){ fn(element, result); });
    });
    },
    $.fn.extend({

    elementValidationSuccess: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidationSuccess', function(e, element){ fn(element); });
    });
    },
    // Wouldn't it be nice if, when the full form's validation runs, it triggers the
    // element* validation events? Well, that's what this does!
    //
    // NOTE: This is VERY coupled with jquery.validation.unobtrusive and uses its
    // element attributes to figure out which fields use validation and
    // whether or not they're currently valid.
    //
    triggerElementValidationsOnFormValidation: function() {
    return this.each(function(){
    $(this).bind('formValidation', function(e, form, result){
    $(form).find('*[data-val=true]').each(function(i, field){
    if ($(field).hasClass('input-validation-error')) {
    $(field).trigger('elementValidationError', field);
    $(field).trigger('elementValidation', [field, false]);
    } else {
    $(field).trigger('elementValidationSuccess', field);
    $(field).trigger('elementValidation', [field, true]);
    }
    });
    });
    });
    },

    elementValidationError: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidationError', function(e, element){ fn(element); });
    });
    },
    formValidation: function(fn) {
    return this.each(function(){
    $(this).bind('formValidation', function(e, element, result){ fn(element, result); });
    });
    },

    formValidationSuccess: function(fn) {
    return this.each(function(){
    $(this).bind('formValidationSuccess', function(e, element){ fn(element); });
    });
    },

    formValidationError: function(fn) {
    return this.each(function(){
    $(this).bind('formValidationError', function(e, element){ fn(element); });
    });
    },

    formValidAndInvalid: function(valid, invalid) {
    return this.each(function(){
    $(this).bind('formValidationSuccess', function(e, element){ valid(element); });
    $(this).bind('formValidationError', function(e, element){ invalid(element); });
    });
    },

    elementValidation: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidation', function(e, element, result){ fn(element, result); });
    });
    },

    elementValidationSuccess: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidationSuccess', function(e, element){ fn(element); });
    });
    },

    elementValidationError: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidationError', function(e, element){ fn(element); });
    });
    },

    elementValidAndInvalid: function(valid, invalid) {
    return this.each(function(){
    $(this).bind('elementValidationSuccess', function(e, element){ valid(element); });
    $(this).bind('elementValidationError', function(e, element){ invalid(element); });
    });
    }

    elementValidAndInvalid: function(valid, invalid) {
    return this.each(function(){
    $(this).bind('elementValidationSuccess', function(e, element){ valid(element); });
    $(this).bind('elementValidationError', function(e, element){ invalid(element); });
    });
    }
    });

    });
    })(jQuery);
  3. remi Taylor revised this gist May 5, 2011. 1 changed file with 23 additions and 0 deletions.
    23 changes: 23 additions & 0 deletions jquery.validate.hooks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -45,6 +45,29 @@ $.fn.addTriggersToJqueryValidate = function() {

    $.fn.extend({

    // Wouldn't it be nice if, when the full form's validation runs, it triggers the
    // element* validation events? Well, that's what this does!
    //
    // NOTE: This is VERY coupled with jquery.validation.unobtrusive and uses its
    // element attributes to figure out which fields use validation and
    // whether or not they're currently valid.
    //
    triggerElementValidationsOnFormValidation: function() {
    return this.each(function(){
    $(this).bind('formValidation', function(e, form, result){
    $(form).find('*[data-val=true]').each(function(i, field){
    if ($(field).hasClass('input-validation-error')) {
    $(field).trigger('elementValidationError', field);
    $(field).trigger('elementValidation', [field, false]);
    } else {
    $(field).trigger('elementValidationSuccess', field);
    $(field).trigger('elementValidation', [field, true]);
    }
    });
    });
    });
    },

    formValidation: function(fn) {
    return this.each(function(){
    $(this).bind('formValidation', function(e, element, result){ fn(element, result); });
  4. remi Taylor revised this gist May 5, 2011. 1 changed file with 8 additions and 3 deletions.
    11 changes: 8 additions & 3 deletions jquery.validate.hooks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -18,19 +18,24 @@ $.fn.addTriggersToJqueryValidate = function() {
    else
    form.data('jQueryValidateTriggersAdded', true);

    // Override the function that validates the whole form to trigger a
    // formValidation event and either formValidationSuccess or formValidationError
    var oldForm = validator.form;
    validator.form = function() {
    var result = oldForm.apply(this, arguments);
    $(this).trigger((result == true) ? 'formValidationSuccess' : 'formValidationError', this);
    $(this).trigger('formValidation', { form: this, result: result });
    var form = this.currentForm;
    $(form).trigger((result == true) ? 'formValidationSuccess' : 'formValidationError', form);
    $(form).trigger('formValidation', [form, result]);
    return result;
    };

    // Override the function that validates the whole element to trigger a
    // elementValidation event and either elementValidationSuccess or elementValidationError
    var oldElement = validator.element;
    validator.element = function(element) {
    var result = oldElement.apply(this, arguments);
    $(element).trigger((result == true) ? 'elementValidationSuccess' : 'elementValidationError', element);
    $(element).trigger('elementValidation', { element: element, result: result });
    $(element).trigger('elementValidation', [element, result]);
    return result;
    };
    });
  5. remi Taylor revised this gist May 5, 2011. 1 changed file with 6 additions and 0 deletions.
    6 changes: 6 additions & 0 deletions README.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -30,6 +30,12 @@ $(document).ready(function(){
    // running this overrides some jQuery Validate stuff so we can hook into its validations
    $('form').addTriggersToJqueryValidate();

    // You can bind to events that the forms/elements trigger on validation
    $('form').bind('formValidation', function(event, element, result) {
    console.log(['validation ran for form:', element, 'and the result was:', result]);
    });

    // Or you can use the helper functions that we created for binding to these events
    $('form').formValidation(function(element, result) {
    console.log(['validation ran for form:', element, 'and the result was:', result]);
    });
  6. remi Taylor revised this gist May 5, 2011. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions jquery.validate.hooks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,7 @@ $.fn.addTriggersToJqueryValidate = function() {
    return this.each(function(){
    var form = $(this);

    // Grab this element's validator object (if it has one)
    // Grab this element's validator object (if it has one)
    var validator = form.data('validator');

    // Only run this code if there's a validator associated with this element
    @@ -20,15 +20,15 @@ $.fn.addTriggersToJqueryValidate = function() {

    var oldForm = validator.form;
    validator.form = function() {
    var result = oldForm.apply(this, arguments);
    var result = oldForm.apply(this, arguments);
    $(this).trigger((result == true) ? 'formValidationSuccess' : 'formValidationError', this);
    $(this).trigger('formValidation', { form: this, result: result });
    return result;
    };

    var oldElement = validator.element;
    validator.element = function(element) {
    var result = oldElement.apply(this, arguments);
    var result = oldElement.apply(this, arguments);
    $(element).trigger((result == true) ? 'elementValidationSuccess' : 'elementValidationError', element);
    $(element).trigger('elementValidation', { element: element, result: result });
    return result;
  7. remi Taylor revised this gist May 5, 2011. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@ We might extend this to be able to hook into other things, like [jQuery Validate
    Installation
    ------------

    <script type="text/javascript" src="">jquery.validate.hooks.js</script>
    <script type="text/javascript" src="jquery.validate.hooks.js"></script>

    Usage
    -----
  8. remi Taylor revised this gist May 5, 2011. 1 changed file with 57 additions and 1 deletion.
    58 changes: 57 additions & 1 deletion jquery.validate.hooks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -34,4 +34,60 @@ $.fn.addTriggersToJqueryValidate = function() {
    return result;
    };
    });
    };
    };

    /* Below here are helper methods for calling .bind() for you */

    $.fn.extend({

    formValidation: function(fn) {
    return this.each(function(){
    $(this).bind('formValidation', function(e, element, result){ fn(element, result); });
    });
    },

    formValidationSuccess: function(fn) {
    return this.each(function(){
    $(this).bind('formValidationSuccess', function(e, element){ fn(element); });
    });
    },

    formValidationError: function(fn) {
    return this.each(function(){
    $(this).bind('formValidationError', function(e, element){ fn(element); });
    });
    },

    formValidAndInvalid: function(valid, invalid) {
    return this.each(function(){
    $(this).bind('formValidationSuccess', function(e, element){ valid(element); });
    $(this).bind('formValidationError', function(e, element){ invalid(element); });
    });
    },

    elementValidation: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidation', function(e, element, result){ fn(element, result); });
    });
    },

    elementValidationSuccess: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidationSuccess', function(e, element){ fn(element); });
    });
    },

    elementValidationError: function(fn) {
    return this.each(function(){
    $(this).bind('elementValidationError', function(e, element){ fn(element); });
    });
    },

    elementValidAndInvalid: function(valid, invalid) {
    return this.each(function(){
    $(this).bind('elementValidationSuccess', function(e, element){ valid(element); });
    $(this).bind('elementValidationError', function(e, element){ invalid(element); });
    });
    }

    });
  9. remi Taylor revised this gist May 5, 2011. 1 changed file with 23 additions and 23 deletions.
    46 changes: 23 additions & 23 deletions README.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -21,35 +21,35 @@ Installation
    Usage
    -----

    ```ruby
    puts "testing github flavored markdown syntax highlighting"
    ```

    $(document).ready(function(){
    ``` javascript
    $(document).ready(function(){

    // $('form').validate(); <--- we're assuming that this has already been run (which MVC3 does automatically)
    // we're assuming that this has already been run (which MVC3 does automatically)
    // $('form').validate();

    $('form').addTriggersToJqueryValidate(); // <--- running this overrides some jQuery Validate stuff
    // running this overrides some jQuery Validate stuff so we can hook into its validations
    $('form').addTriggersToJqueryValidate();

    $('form').formValidation(function(element, result) {
    console.log(['validation ran for form:', element, 'and the result was:', result]);
    });
    $('form').formValidation(function(element, result) {
    console.log(['validation ran for form:', element, 'and the result was:', result]);
    });

    $('input.something').elementValidation(function(element, result) {
    console.log(['validation ran for element:', element, 'and the result was:', result]);
    });
    $('input.something').elementValidation(function(element, result) {
    console.log(['validation ran for element:', element, 'and the result was:', result]);
    });

    $('input#address').elementValidationSuccess(function(element) {
    console.log(['validations just ran for this element and it was valid!', element]);
    });

    $('input#address').elementValidAndInvalid(function(element) {
    console.log(['validations just ran for this element and it was valid!', element]);
    }, function(element){
    console.log(['validations just ran for this element and it was INVALID!', element]);
    });
    });
    $('input#address').elementValidationSuccess(function(element) {
    console.log(['validations just ran for this element and it was valid!', element]);
    });

    $('input#address').elementValidAndInvalid(function(element) {
    console.log(['validations just ran for this element and it was valid!', element]);
    }, function(element){
    console.log(['validations just ran for this element and it was INVALID!', element]);
    });
    });
    ```

    [ASP.NET MVC3]: http://www.asp.net/mvc/mvc3
    [jQuery Validate]: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    [jQuery.Validate.Unobtrusive]: http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
  10. remi Taylor revised this gist May 5, 2011. 1 changed file with 4 additions and 0 deletions.
    4 changes: 4 additions & 0 deletions README.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -21,6 +21,10 @@ Installation
    Usage
    -----

    ```ruby
    puts "testing github flavored markdown syntax highlighting"
    ```

    $(document).ready(function(){

    // $('form').validate(); <--- we're assuming that this has already been run (which MVC3 does automatically)
  11. remi Taylor created this gist May 5, 2011.
    51 changes: 51 additions & 0 deletions README.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,51 @@
    jQuery Validate Hooks
    =====================

    If you're using [ASP.NET MVC3][], it uses [jQuery Validate][] to do client-side validations.
    Instead of using [jQuery Validate][] directly, however, it wraps it with its own jQuery plugin called [jQuery.Validate.Unobtrusive][]. [jQuery.Validate.Unobtrusive][] sets up [jQuery Validate][] for you,
    behind the scenes, so you don't have an opportunity to customize your [jQuery Validate][] settings at all!

    We've been running into trouble with this when we've been doing our own custom client-side validations.
    We need a way to integrate with the build-in [ASP.NET MVC3][] validation so we can:

    - Find out when our form's client-side validation runs and do something custom, if it fails
    - Find out when a particular element's client-side validation runs and do something custom if it passes or fails

    We might extend this to be able to hook into other things, like [jQuery Validate][]'s `submitHandler` (which allows you to override what happens when the form is valid and ready to be submitted).

    Installation
    ------------

    <script type="text/javascript" src="">jquery.validate.hooks.js</script>

    Usage
    -----

    $(document).ready(function(){

    // $('form').validate(); <--- we're assuming that this has already been run (which MVC3 does automatically)

    $('form').addTriggersToJqueryValidate(); // <--- running this overrides some jQuery Validate stuff

    $('form').formValidation(function(element, result) {
    console.log(['validation ran for form:', element, 'and the result was:', result]);
    });

    $('input.something').elementValidation(function(element, result) {
    console.log(['validation ran for element:', element, 'and the result was:', result]);
    });

    $('input#address').elementValidationSuccess(function(element) {
    console.log(['validations just ran for this element and it was valid!', element]);
    });

    $('input#address').elementValidAndInvalid(function(element) {
    console.log(['validations just ran for this element and it was valid!', element]);
    }, function(element){
    console.log(['validations just ran for this element and it was INVALID!', element]);
    });
    });

    [ASP.NET MVC3]: http://www.asp.net/mvc/mvc3
    [jQuery Validate]: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
    [jQuery.Validate.Unobtrusive]: http://bradwilson.typepad.com/blog/2010/10/mvc3-unobtrusive-validation.html
    37 changes: 37 additions & 0 deletions jquery.validate.hooks.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    $.fn.addTriggersToJqueryValidate = function() {

    // Loop thru the elements that we jQuery validate is attached to
    // and return the loop, so jQuery function chaining will work.
    return this.each(function(){
    var form = $(this);

    // Grab this element's validator object (if it has one)
    var validator = form.data('validator');

    // Only run this code if there's a validator associated with this element
    if (! validator)
    return;

    // Only add these triggers to each element once
    if (form.data('jQueryValidateTriggersAdded'))
    return;
    else
    form.data('jQueryValidateTriggersAdded', true);

    var oldForm = validator.form;
    validator.form = function() {
    var result = oldForm.apply(this, arguments);
    $(this).trigger((result == true) ? 'formValidationSuccess' : 'formValidationError', this);
    $(this).trigger('formValidation', { form: this, result: result });
    return result;
    };

    var oldElement = validator.element;
    validator.element = function(element) {
    var result = oldElement.apply(this, arguments);
    $(element).trigger((result == true) ? 'elementValidationSuccess' : 'elementValidationError', element);
    $(element).trigger('elementValidation', { element: element, result: result });
    return result;
    };
    });
    };