[Summary view] [Print] [Text view]

   1  var FormValidator = Class.create();
   2  
   3  FormValidator.prototype = {
   4      validation_fields: new Object(),
   5      
   6      initialize: function(form, options)
   7      {
   8          if(!$(form))
   9          {
  10              alert("Invalid form");
  11          }
  12          Event.observe($(form), "submit", this.onSubmit.bindAsEventListener(this));
  13      },
  14  
  15      register: function(field, validation_type, customOptions)
  16      {
  17          options = {
  18              status_field: field+"_status"
  19          };
  20          Object.extend(options, customOptions || {});
  21          if(!$(field) && !validation_type)
  22          {
  23              return false;
  24          }
  25          if(!this.validation_fields[field])
  26          {
  27              this.validation_fields[field] = new Array();
  28              Event.observe($(field), "blur", this.onBlur.bindAsEventListener(this));
  29          }
  30          if(!$(options.status_field))
  31          {
  32              this.createStatusField(field);
  33          }
  34          validation_field = {field: field, validation_type: validation_type, options: options};
  35          this.validation_fields[field][this.validation_fields[field].length] = validation_field;    
  36      },
  37  
  38      onBlur: function(e)
  39      {
  40          element = Event.element(e);
  41          id = element.id;
  42          this.validateField(id);
  43      },
  44  
  45      validateField: function(id, twin_call, submit_call)
  46      {
  47          if(!this.validation_fields[id])
  48          {
  49              return false;
  50          }
  51          validation_field = this.validation_fields[id];
  52          for(var i=0; i<validation_field.length;i++)
  53          {
  54              var field = validation_field[i];
  55              if(field.validation_type == "matches")
  56              {
  57                  twin = field.options.match_field;
  58                  if(Element.hasClassName(twin, "invalid_field"))
  59                  {
  60                      return false;
  61                  }
  62              }
  63              result = this.checkValidation(id, field.validation_type, field.options, submit_call);
  64              options = field.options;
  65              if(result == false)
  66              {
  67                  this.showError(id, options.status_field, options.failure_message);
  68                  // don't run any further validation routines
  69                  return false;
  70              }
  71              else if(result == "loading")
  72              {
  73                  this.showLoading(id, options.status_field, options.loading_message);
  74                  $(id).className = "";
  75                  return false;
  76              }
  77              else
  78              {
  79                  ret = true;
  80                  this.showSuccess(id, options.status_field, options.success_message);
  81                  // Has match field
  82                  if(options.match_field && !twin_call)
  83                  {
  84                      if(field.validation_type != "matches")
  85                      {
  86                          return true;
  87                      }
  88  
  89                      ret = this.validateField(options.match_field, 1);
  90                      if(ret == false)
  91                      {
  92                          $(id).className = "invalid_field";
  93                      }
  94                  }
  95              }
  96          }
  97      },
  98  
  99      checkValidation: function(id, type, options, submit_call)
 100      {
 101          element = $(id);
 102          field_type = element.type.toLowerCase();
 103  
 104          if(typeof type == "function")
 105          {
 106              return type(id, this);
 107          }
 108  
 109          if(field_type == "radio" || field_type == "checkbox")
 110          {
 111              value = this.getCheckedValue(id);
 112          }
 113          else
 114          {
 115              value = this.getValue(id);
 116          }
 117          switch(type.toLowerCase())
 118          {
 119              case "ajax":
 120                  if(use_xmlhttprequest == 1)
 121                  {
 122                      if(!options.url)
 123                      {
 124                          return false;
 125                      }
 126  
 127                      // don't ajax validate on submit
 128                      if(submit_call)
 129                      {
 130                          return true;
 131                      }
 132  
 133                      extra = "";
 134  
 135                      if(typeof options.extra_body == "object")
 136                      {
 137                          for(x = 0; x < options.extra_body.length; ++x)
 138                          {
 139                              extra += "&" + escape(options.extra_body[x]) + "=" + encodeURIComponent(this.getValue(options.extra_body[x]));
 140                          }
 141                      }
 142                      else if(typeof options.extra_body != "undefined")
 143                      {
 144                          extra = "&" + escape(options.extra_body) + "=" + encodeURIComponent(this.getValue(options.extra_body));
 145                      }
 146                      
 147                      new Ajax.Request(options.url, {method:'post', postBody:"value=" + encodeURIComponent(value) + extra + "&my_post_key=" + my_post_key, onComplete: function(request) { this.ajaxValidateComplete(id, options, request); }.bind(this)});
 148  
 149                      return "loading";
 150                      break;
 151                  }
 152                  type = "notempty";
 153              case "notempty":
 154                  value = value.replace(/^\s+|\s+$/g,"");
 155                  if(value == null || value.length == 0)
 156                  {
 157                      return false;
 158                  }
 159  
 160                  return true;
 161                  break;
 162              case "length":
 163                  if((options.min && value.length < options.min) || (options.max && value.length > options.max))
 164                  {
 165                      return false;
 166                  }
 167  
 168                  return true;
 169                  break;
 170              case "matches":
 171                  if(!options.match_field)
 172                  {
 173                      return false;
 174                  }
 175  
 176                  if(value != this.getValue(options.match_field))
 177                  {
 178                      return false;
 179                  }
 180  
 181                  return true;
 182                  break;
 183              case "regexp":
 184                  regexp = new RegExp(options.regexp);
 185  
 186                  if(!element.value.match(regexp))
 187                  {
 188                      return false;
 189                  }
 190  
 191                  return true;
 192                  break;
 193          }
 194      },
 195  
 196      ajaxValidateComplete: function(id, options, request)
 197      {
 198          if(request.responseXML.getElementsByTagName("success").length > 0)
 199          {
 200              response = request.responseXML.getElementsByTagName("success")[0].firstChild;
 201              if(response)
 202              {
 203                  response = response.data;
 204              }
 205              this.showSuccess(id, options.status_field, response);
 206          }
 207          else if(request.responseXML.getElementsByTagName("fail").length > 0)
 208          {
 209              response = request.responseXML.getElementsByTagName("fail")[0].firstChild;
 210              if(response)
 211              {
 212                  response = response.data;
 213              }
 214              this.showError(id, options.status_field, response);
 215          }
 216      },
 217  
 218      onSubmit: function(e)
 219      {
 220          $H(this.validation_fields).each(function(validation_field) {
 221              this.validateField(validation_field.key, 0, 1);
 222          }.bind(this));
 223  
 224          errorFields = $$(".invalid_field");
 225          if(errorFields.length > 0)
 226          {
 227              // Focus on field with first error
 228              errorFields[0].focus();
 229              Event.stop(e);
 230              return false;
 231          }
 232          else
 233          {
 234              return true;
 235          }
 236      },
 237  
 238      createStatusField: function(id)
 239      {
 240          element = $(id);
 241          status_field = document.createElement("div");
 242          status_field.id = id+"_status";
 243          status_field.style.display = 'none';
 244          switch(element.type.toLowerCase())
 245          {
 246              case "radio":
 247              case "checkbox":
 248                  element.parentNode.appendChild(status_field);
 249                  break;
 250              default:
 251                  element.parentNode.insertBefore(status_field, element.nextSibling);
 252          }
 253      },
 254  
 255      showError: function(field, area, message)
 256      {
 257          Element.removeClassName(area, "validation_success");
 258          Element.removeClassName(area, "validation_loading");
 259          Element.addClassName(area, "validation_error");
 260          $(field).className = "invalid_field";
 261          if(!message)
 262          {
 263              message = "The value you entered is invalid";
 264          }
 265          $(area).innerHTML = message;
 266          $(area).show();
 267      },
 268  
 269      showSuccess: function(field, area, message)
 270      {
 271          Element.removeClassName(area, "validation_error");
 272          Element.removeClassName(area, "validation_loading");
 273          Element.addClassName(area, "validation_success");
 274          $(field).className = "valid_field";
 275          if(message)
 276          {
 277              $(area).innerHTML = message;
 278              $(area).show();
 279          }
 280          else
 281          {
 282              $(area).hide();
 283          }
 284      },
 285  
 286      showLoading: function(field, area, message)
 287      {
 288          Element.removeClassName(area, "validation_success");
 289          Element.removeClassName(area, "validation_error");
 290          Element.addClassName(area, "validation_loading");
 291  
 292          if(!message)
 293          {
 294              message = "Checking for validity...";
 295          }
 296  
 297          $(area).innerHTML = message;
 298          $(area).show();
 299      },
 300      
 301      getValue: function(element)
 302      {
 303          element = $(element);
 304  
 305          if(!element)
 306          {
 307              return false;
 308          }
 309  
 310          switch(element.type.toLowerCase())
 311          {
 312              case "text":
 313              case "password":
 314              case "hidden":
 315              case "textarea":
 316                  return element.value;
 317                  break;
 318              case "radio":
 319              case "checkbox":
 320                  return element.checked;
 321                  break;
 322              case "select-one":
 323                  value = '';
 324                  index = element.selectedIndex;
 325                  if(index >= 0)
 326                  {
 327                      value = element.options[index].value;
 328                  }
 329                  return value;
 330                  break;
 331              case "select-multiple":
 332                  var value = new Array();
 333                  element.options.each(function(option) {
 334                      if(option.checked == true)
 335                      {
 336                          value.push(option.value);
 337                      }
 338                  });
 339                  return value;
 340                  break;
 341          }
 342      },
 343      
 344      /* Fetch the text value from a series of radio or checkbuttons. Pass one of the radio or check buttons within a group */
 345      getCheckedValue: function(element)
 346      {
 347          element = $(element);
 348  
 349          if(!element)
 350          {
 351              return false;
 352          }
 353  
 354          if(!element.parentNode)
 355          {
 356              return false;
 357          }
 358  
 359          var value = new Array();
 360          inputs = element.parentNode.getElementsByTagName('INPUT');
 361          inputs.each(function(input) {
 362              if(input.checked == true)
 363              {
 364                  value.push(input.value);
 365              }
 366          });
 367  
 368          // No matches, no return value
 369          if(value.length == 0)
 370          {
 371              return '';
 372          }
 373          // One match, return string
 374          else if(value.length == 1)
 375          {
 376              return value[0];
 377          }
 378          // More than one, return array
 379          else
 380          {
 381              return value;
 382          }
 383      }
 384  };