Tip: Click lines to highlight, hold ctrl/cmd to multi-select

Ajax validation plugin (4-Jan @ 17:57)

On keyup, sends the value of the specific input field to the form it's set within. By detecting the HTTPXREQUESTED_WITH header in the script the request is sent to, can allow you to send a specific response to the client.

Responses should be JSON and contain the following two attributes: ok {bool}, msg {string}

remy

Syntax Highlighted Code

  1. (function ($) {
  2.     $.fn.liveCheck = function () {
  3.         return this.each(function () {
  4.             var $$ = $(this);
  5.             var t = this;
  6.            
  7.             var url = $$.parents('form:first').attr('action');
  8.            
  9.             var infospan = $$.parent().find('span');
  10.             if (!infospan.length) {
  11.                 infospan = $$.after(' <span></span>').next();
  12.             }
  13.            
  14.             $$.keyup(function () {
  15.                 // prevent tabbing in to the field firing an ajax hit
  16.                 if (t.value == '' && (t.lastValue == undefined)) return true;
  17.                
  18.                 if (t.value != t.lastValue) {
  19.                     if (this.timer) clearTimeout(this.timer);
  20.                     infospan.removeClass('error').html('<img src="/images/ajax-loader.gif" height="16" width="16" /> validating...');
  21.                     this.timer = setTimeout(function () {
  22.                         $.ajax({
  23.                             url: url,
  24.                             data: t.name + '=' + t.value,
  25.                             dataType: 'json',
  26.                             type: 'post',
  27.                             success: function (j) {
  28.                                 infospan.toggleClassIf(!j.ok, 'error').html(j.msg);
  29.                             }
  30.                         });
  31.                     }, 200);
  32.                     t.lastValue = t.value;
  33.                 }
  34.             });
  35.         });
  36.     };
  37.    
  38.     $.fn.toggleClassIf = function (v, c) {
  39.         return v ? this.addClass(c) : this.removeClass(c);
  40.     };
  41.    
  42. })(jQuery);
  43.  

Plain Code

(function ($) {
    $.fn.liveCheck = function () {
        return this.each(function () {
            var $$ = $(this);
            var t = this;
            
            var url = $$.parents('form:first').attr('action');
            
            var infospan = $$.parent().find('span');
            if (!infospan.length) {
                infospan = $$.after(' <span></span>').next();
            }
            
            $$.keyup(function () {
                // prevent tabbing in to the field firing an ajax hit
                if (t.value == '' && (t.lastValue == undefined)) return true;
                
                if (t.value != t.lastValue) {
                    if (this.timer) clearTimeout(this.timer);
                    infospan.removeClass('error').html('<img src="/images/ajax-loader.gif" height="16" width="16" /> validating...');
                    this.timer = setTimeout(function () {
                        $.ajax({
                            url: url,
                            data: t.name + '=' + t.value,
                            dataType: 'json',
                            type: 'post',
                            success: function (j) {
                                infospan.toggleClassIf(!j.ok, 'error').html(j.msg);
                            }
                        });
                    }, 200);
                    t.lastValue = t.value;
                }
            });
        });
    };
    
    $.fn.toggleClassIf = function (v, c) {
        return v ? this.addClass(c) : this.removeClass(c);
    };
    
})(jQuery);

Codedump Run

Permalink: http://codedumper.com/ajax-validation-plugin