form.js

嵌入式无线路由系统openwrt的web配置工具

    var pos = label.getPosition();
    this.hint.set('html', errors.join('<br /><br />')).setStyles({
      'left': pos.x + 'px',
      'top': pos.y + 'px',
      'display': 'block'
    });
  },
  /*

  Function: hideHint
    Hides hint / error message

  */
  hideHint: function() {
    this.hint.setStyle('display', 'none');
  },
  /*

  Function: iframeLoaded
    Executed when iframe has finished loading (only with options.iframe enabled)

  */
  iframeLoaded: function() {
    // check that iframe document exists
    var iframeWin = this.iframe.contentWindow;
    if (!iframeWin || !iframeWin.document || !iframeWin.document.body) {
      return;
    }
    // get inner content, make sure it's not blank
    var content = iframeWin.document.body.innerHTML;
    if (!content) {
      return;
    }
    // parse content as JSON object
    var reply = JSON.decode(content);
    if (!reply) {
      return;
    }

    this.submitButton.disabled = false;
    // all good, can close the window
    if (reply.done) {
      if (reply.params) {
        this.options.callback(reply.params, this.options.cbParam);      
      }

      this.iframe.src = '';
      this.iframe.destroy();

      FlashSYS.closeWindow(this.options.module);
      // reload parent module if required
      if (this.options.reload) {
        FlashSYS.load({
          'module': this.options.reload
        });
      }
    }
  },
  /*

  Function: showAllBlocks
    Do block check on form init

  */
  showAllBlocks: function() {
    for (var elemName in this.elemTypes) {
      if (this.elemTypes[ elemName ] == 'select') {
        this.selectChange(elemName, true);
      }
    }
  },
  /*

  Function: selectChange
    Custom callback and block show / hide for select element onchange event

  Arguments:
    selectName - (string) select element's id / name

  */
  selectChange: function(selectName, auto) {
    var selectValue = this.elements[ selectName ].get('value');
    var selectCallback = this.callbacks[ selectName ];

    if (selectCallback && !auto) {
      selectCallback.run(selectValue, this);
    }

    var selectBlocks = this.selectBlocks[ selectName ];

    if (!selectBlocks) {
      return;
    }

    var blocks = selectBlocks.change[ selectValue ] ? selectBlocks.change[ selectValue ] : selectBlocks.def;

    $each(blocks, function(show, block) {
      if (selectBlocks.useCls) {
        this.blocks[ block ][ (show ? 'removeClass' : 'addClass') ]('Hidden');
      }
      else {
        this.blocks[ block ].setStyle('display', (show ? 'block' : 'none') );
      }
    }, this);
  },
  /*

  Function: validate
    Validate given values

  Arguments:
    formValues - (object) serialized form values

  Returns:
    (boolean) - validation result

  Validation function arguments:
    elemName - (string) given element name
    elemValue - (string) given element value, trimmed (password are leaved as is)
    valParams - (mixed)
    formValues - (object) serialized form values

  Validation function returns:
    (boolean) - field validation result

  */
  validate: function(formValues) {
    var errorClass = this.options.classPrefix + 'Error', formValid = true, switchTab = -2, elemName = null;

    // reset wrap classes for errors
    for (elemName in this.errors) {
      this.elemWraps[ elemName ].removeClass(errorClass);
    }

    this.errors = {};

    for (elemName in formValues) {
      var validation = this.validation[ elemName ], elemValid = true;

      // make sure that validation is enabled for this element
      if (validation) {
        var elemValue = formValues[ elemName ], errors = [];

        // single type validation, like validate: 'required', convert to object
        if ($type(validation) == 'string') {
          var valKey = validation;
          validation = {};
          validation[ valKey ] = true;
        }

        // if field is not required, empty value skips validation
        if (validation.required !== false || elemValue !== '') {
          for (var valType in validation) {
            var valFn = 'validate' + valType.capitalize();
            var error = this[ valFn ](elemName, elemValue, validation[ valType ], formValues);

            if (error) {
              errors.push( error );
            }
          }
        }

        // elem value is invalid, add error class to wrapper
        if (errors.length > 0) {
          formValid = false;

          if (switchTab < -1) {
            switchTab = this.elemTabs[ elemName ];
          }

          this.errors[ elemName ] = errors;
          this.elemWraps[ elemName ].addClass(errorClass);
        }
      }
    }

    // switch to tab with first error if form uses tabs
    if (this.tabs) {
      this.tabs.tabClick( switchTab );
    }

    return formValid;
  },
  /*

  Function: validateRequired
    Basic check that field value is not empty

  */
  validateRequired: function(elemName, elemValue, valParams, formValues) {
    if (elemValue === '') {
      return $TR('validate_required');
    }
    
    return null;
  },
  /*

  Function: validateLength
    Validate field length (min, max or both)

  Parameter:
    array - first element - minimum length, second - maximum length. Use 0 to ignore min or max length check

  */
  validateLength: function(elemName, elemValue, valParams, formValues) {
    var fieldLen = elemValue.length, minLen = valParams[0], maxLen = valParams[1], error = null;

    // validate both min and max length
    if (minLen > 0 && maxLen > 0 && (fieldLen < minLen || fieldLen > maxLen)) {
      error = 'validate_len_between';
    }
    // minimum length
    else if (minLen > 0 && fieldLen < minLen) {
      error = 'validate_len_min';
    }
    // maximum length
    else if (maxLen > 0 && fieldLen > maxLen) {
      error = 'validate_len_max';
    }

    return error ? $TR( error ).replace('%0', minLen).replace('%1', maxLen) : null;
  },
  /*

  Function: validateRegexp
    Validate field using regular expression

  Parameter:
    array - first element - regexp, second - error message
    string - just the regexp, use default error message (not recommended)

  */
  validateRegexp: function(elemName, elemValue, valParams, formValues) {
    if ($type(valParams) == 'array') {
      var regexp = valParams[0], error = valParams[1];
    }
    else {
      var regexp = valParams, error = 'validate_regexp';
    }

    return elemValue.match(regexp) ? null : $TR(error);
  },
  /*

  Function: validateIp
    Validate IP address, uses validateRegexp

  */
  validateIp: function(elemName, elemValue, valParams, formValues) {
    var ipRegexp = /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/;
    return this.validateRegexp(elemName, elemValue, [ipRegexp, 'validate_ip']);
  },
  /*

  Function: validateDigit
    String must consist of digits only (no minus sign, etc), uses validateRegexp

  */
  validateDigit: function(elemName, elemValue, valParams, formValues) {
    return this.validateRegexp(elemName, elemValue, [/^\d+$/, 'validate_digit']);
  },
  /*

  Function: validateWord
    0-9, a-z, A-Z, _ only, uses validateRegexp

  */
  validateWord: function(elemName, elemValue, valParams, formValues) {
    return this.validateRegexp(elemName, elemValue, [/^\w+$/, 'validate_word']);
  },
  /*

  Function: validateAlphanum
    0-9, a-z, A-Z, uses validateRegexp

  */
  validateAlphanum: function(elemName, elemValue, valParams, formValues) {
    return this.validateRegexp(elemName, elemValue, [/^[0-9a-zA-Z]+$/, 'validate_alphanum']);
  },
  /*

  Function: validateNospaces
    String with no whitespaces, uses validateRegexp

  */
  validateNospaces: function(elemName, elemValue, valParams, formValues) {
    return this.validateRegexp(elemName, elemValue, [/^[\S]+$/, 'validate_nospaces']);
  },
  /*

  Function: validateHex
    Validate hexadecimal string, uses validateRegexp

  */
  validateHex: function(elemName, elemValue, valParams, formValues) {
    return this.validateRegexp(elemName, elemValue, [/^[0-9a-fA-F]+$/, 'validate_hex']);
  },
  /*

  Function: validateInteger
    Validate field as integer with limits (min, max or both)

  Parameter:
    array - first element - minimum value, second - maximum value, use boolean false to skip check

  */
  validateInteger: function(elemName, elemValue, valParams, formValues) {
    var intVal = parseInt(elemValue, 10), minVal = valParams[0], maxVal = valParams[1], error = null;

    // not a number entered
    if (isNaN(intVal)) {
      error = 'validate_int_nan';
    }
    // validate both min and max value
    else if (minVal !== false && maxVal !== false && (intVal < minVal || intVal > maxVal)) {
      error = 'validate_int_between';
    }
    // minimum value
    else if (minVal !== false && intVal < minVal) {
      error = 'validate_int_min';
    }
    // maximum value
    else if (maxVal !== false && intVal > maxVal) {
      error = 'validate_int_max';
    }

    return error ? $TR( error ).replace('%0', minVal).replace('%1', maxVal) : null;
  },
  /*

  Function: validateMatch
    Given element's value must match other element's value (useful for passwords)

  Parameter:
    array - first element - second element's name, second element - error message
    string - second element's name

  */
  validateMatch: function(elemName, elemValue, valParams, formValues) {
    if ($type(valParams) == 'array') {
      var matchValue = formValues[ valParams[0] ], error = valParams[1];
    }
    else {
      var matchValue = formValues[ valParams ], error = 'validate_match';
    }

    return (matchValue && elemValue == matchValue) ? null : $TR(error);
  },
  /*

  Function: validateCustom
    Execute given custom function bound to form instance

  Custom fn arguments:
    elemValue - (string) given element's value
    formValues - (object) serialized form values

  */
  validateCustom: function(elemName, elemValue, valParams, formValues) {
    valParams.run([elemValue, formValues], this);
  },
  /*

  Function: formSubmit
    Executed when user has pressed the submit button

  */
  formSubmit: function() {
    this.options.params.values = this.serialize();

    // do form validation
    if (this.options.validate && !this.validate(this.options.params.values)) {
      return false;
    }

    // iframe submit event required, no need to check form values
    if (this.options.iframe) {
      // post form data using hidden element (except file uploads)
      new Element('input', {
        'type': 'hidden',
        'name': 'data',
        'value': JSON.encode(this.options.params.values)
      }).inject(this.container);

      this.form.submit();
      return false;
    }

    if (this.options.submit) {
      this.options.submit.run([this.options.params.values, this.options.submitParam], this);
      return false;
    }

    // check what has changed
    var diff = $compare(this.initial, this.options.params.values);

    if (diff !== null) {
      // store count of differences between initial state, need this for 'apply changes'
      var diffCount = 0;

      // post differences only, reset object with values
      if (!this.options.postAll) {
        var values = this.options.params.values;
        this.options.params.values = {};
      }

      for (var i = 0, j = diff.length; i < j; i++) {
        var elemName = diff[ i ];

        if (!this.options.postAll) {
          this.options.params.values[ elemName ] = values[ elemName ];
        }

        // check only elements that have addChange property
        var elem = this.changes[ elemName ];

        // element requires 'apply changes' procedure
        if (elem === true || (elem === undefined && this.options.addChange)) {
          diffCount++;
        }
        // reboot required, finish check
        else if (elem === 'reboot') {
          this.options.reboot = true;
          break;
        }
      }

      // reboot required
      if (this.options.reboot) {
        FlashSYS.addChange({
          reboot: true
        });
      }
      // add change option to queue
      else if (diffCount > 0 && this.options.changeAction) {
        FlashSYS.addChange({
          module: (this.options.changeModule || this.options.module),
          action: this.options.changeAction,
          id: (this.options.changeNoId ? null : this.options.params.id)
        });
      }
    }

    // don't do any data processing if nothing changed, unless postAll is specified (default)
    if (this.options.postAll || diff !== null) {
      FlashSYS.load({
        module: (this.options.saveModule || this.options.module),
        action: this.options.saveAction,
        data: this.options.params,
        failure: FlashSYS.closeWindow.bind(FlashSYS, this.options.module),
        success: FlashSYS.closeWindow.bind(FlashSYS, this.options.module),
        reload: this.options.reload
      });
    }
    // just close the window otherwise