プログラミング/Materialize の履歴(No.3)

コンストラクタ†

LANG:javascript
// Constructor for validator
$.validator = function( options, form ) {
	this.settings = $.extend( true, {}, $.validator.defaults, options );
	this.currentForm = form;
	this.init();
};

options は validator.settings に保存される。

init() は、

LANG:javascript
$.extend( $.validator, {
  ...

  prototype: {

    init: function() {
      ...

      rules = this.settings.rules;
      $.each( rules, function( key, value ) {
        rules[ key ] = $.validator.normalizeRule( value );
      } );
      ...

      $( this.currentForm )
        .on( "focusin.validate focusout.validate keyup.validate",
          ":text, [type='password'], [type='file'], select, textarea, [type='number'], [type='search'], " +
          "[type='tel'], [type='url'], [type='email'], [type='datetime'], [type='date'], [type='month'], " +
          "[type='week'], [type='time'], [type='datetime-local'], [type='range'], [type='color'], " +
          "[type='radio'], [type='checkbox'], [contenteditable], [type='button']", delegate )

          // Support: Chrome, oldIE
          // "select" is provided as event.target when clicking a option
          .on( "click.validate", "select, option, [type='radio'], [type='checkbox']", delegate );

のようにして currentForm 以下の各種入力フィールドにイベントハンドラを結びつける

LANG:javascript
 var currentForm = this.currentForm
   ...

 function delegate( event ) {
  // Set form expando on contenteditable
  if ( !this.form && this.hasAttribute( "contenteditable" ) ) {
      this.form = $( this ).closest( "form" )[ 0 ];
      this.name = $( this ).attr( "name" );
  }

  // Ignore the element if it belongs to another form. This will happen mainly
  // when setting the `form` attribute of an input to the id of another form.
  if ( currentForm !== this.form ) {
      return;
  }

  var validator = $.data( this.form, "validator" ),
      eventType = "on" + event.type.replace( /^validate/, "" ),
      settings = validator.settings;
  if ( settings[ eventType ] && !$( this ).is( settings.ignore ) ) {
      settings[ eventType ].call( validator, this, event );
  }
}

settings[ eventType ] のデフォルト値は、

LANG:javascript
    onfocusin: function( element ) {
      this.lastActive = element;

      // Hide error label and remove error class on focus if enabled
      if ( this.settings.focusCleanup ) {
        if ( this.settings.unhighlight ) {
          this.settings.unhighlight.call( this, element, this.settings.errorClass, this.settings.validClass );
        }
        this.hideThese( this.errorsFor( element ) );
      }
    },
    onfocusout: function( element ) {
      if ( !this.checkable( element ) && ( element.name in this.submitted || !this.optional( element ) ) ) {
        this.element( element );
      }
    },
    onkeyup: function( element, event ) {

      // Avoid revalidate the field when pressing one of the following keys
      // Shift       => 16
      // Ctrl        => 17
      // Alt         => 18
      // Caps lock   => 20
      // End         => 35
      // Home        => 36
      // Left arrow  => 37
      // Up arrow    => 38
      // Right arrow => 39
      // Down arrow  => 40
      // Insert      => 45
      // Num lock    => 144
      // AltGr key   => 225
      var excludedKeys = [
        16, 17, 18, 20, 35, 36, 37,
        38, 39, 40, 45, 144, 225
      ];

      if ( event.which === 9 && this.elementValue( element ) === "" || $.inArray( event.keyCode, excludedKeys ) !== -1 ) {
        return;
      } else if ( element.name in this.submitted || element.name in this.invalid ) {
        this.element( element );
      }
    },
    onclick: function( element ) {

      // Click on selects, radiobuttons and checkboxes
      if ( element.name in this.submitted ) {
        this.element( element );

      // Or option elements, check parent select in that case
      } else if ( element.parentNode.name in this.submitted ) {
        this.element( element.parentNode );
      }
    },

this.element( element ) は、

LANG:javascript
    // https://jqueryvalidation.org/Validator.element/
    element: function( element ) {
      var cleanElement = this.clean( element ),
        checkElement = this.validationTargetFor( cleanElement ),
        v = this,
        result = true,
        rs, group;

      if ( checkElement === undefined ) {
        delete this.invalid[ cleanElement.name ];
      } else {
        this.prepareElement( checkElement );
        this.currentElements = $( checkElement );

        // If this element is grouped, then validate all group elements already
        // containing a value
        group = this.groups[ checkElement.name ];
        if ( group ) {
          $.each( this.groups, function( name, testgroup ) {
            if ( testgroup === group && name !== checkElement.name ) {
              cleanElement = v.validationTargetFor( v.clean( v.findByName( name ) ) );
              if ( cleanElement && cleanElement.name in v.invalid ) {
                v.currentElements.push( cleanElement );
                result = v.check( cleanElement ) && result;
              }
            }
          } );
        }

        rs = this.check( checkElement ) !== false;
        result = result && rs;
        if ( rs ) {
          this.invalid[ checkElement.name ] = false;
        } else {
          this.invalid[ checkElement.name ] = true;
        }

        if ( !this.numberOfInvalids() ) {

          // Hide error containers on last error
          this.toHide = this.toHide.add( this.containers );
        }
        this.showErrors();

        // Add aria-invalid status for screen readers
        $( element ).attr( "aria-invalid", !rs );
      }

      return result;
    },

this.check( element ) は、

LANG:javascript
    check: function( element ) {
      element = this.validationTargetFor( this.clean( element ) );

      var rules = $( element ).rules(),
        rulesCount = $.map( rules, function( n, i ) {
          return i;
        } ).length,
      ...
 
      for ( method in rules ) {
        rule = { method: method, parameters: rules[ method ] };
        try {
          result = $.validator.methods[ method ].call( this, val, element, rule.parameters );
          ...

初めに呼ばれている $( element ).rules() は、

LANG:javascript
  rules: function( command, argument ) {
    var element = this[ 0 ],
     ...

    data = $.validator.normalizeRules(
    $.extend(
      {},
      $.validator.classRules( element ),
      $.validator.attributeRules( element ),
      $.validator.dataRules( element ),
      $.validator.staticRules( element )
    ), element );
    ...

    return data;
  }
} );

classRules により、element の class に、

• required: { required: true },
• email: { email: true },
• url: { url: true },
• date: { date: true },
• dateISO: { dateISO: true },
• number: { number: true },
• digits: { digits: true },
• creditcard: { creditcard: true }

が含まれている場合にチェックする。

attributeRules により、element の attr に、$.validator.methods に含まれる名前が含まれていればチェックする。

dataRules により、element が data-ruleRequired などを含む場合にチェックする。

staticRules により、validator.settings.rules[ element.name ] に含まれるチェックをする。

LANG:javascript
    // https://jqueryvalidation.org/Validator.showErrors/
    showErrors: function( errors ) {
      if ( errors ) {
        var validator = this;

        // Add items to error list and map
        $.extend( this.errorMap, errors );
        this.errorList = $.map( this.errorMap, function( message, name ) {
          return {
            message: message,
            element: validator.findByName( name )[ 0 ]
          };
        } );

        // Remove items from success list
        this.successList = $.grep( this.successList, function( element ) {
          return !( element.name in errors );
        } );
      }
      if ( this.settings.showErrors ) {
        this.settings.showErrors.call( this, this.errorMap, this.errorList );
      } else {
        this.defaultShowErrors();
      }
    },