AFrameJS - Javascript MVC Library - API: AFrame → AFrame.FieldPluginValidation class

class AFrame.FieldPluginValidation class extends AFrame.Plugin

Takes care of validation for a Field, using an HTML5 based FieldValidityState. By default, a FieldPluginValidation is created for each Field. This class can be subclassed and added as a plugin to a Field when specialized field validation is needed. The following functions are added to the field:

getValidityState
validate
setError
setCustomValidity
checkValidity

Unlike the HTML5 spec, Field validation does not occur in real time, for validation to occur, the checkValidity function must be called.

<input type="number" id="numberInput" />

---------

var field = AFrame.Field.create( {
    target: '#numberInput'
} );

// Set the value of the field, it is now displaying 3.1415
field.set(3.1415);

// Check the validity of the field
var isValid = field.checkValidity();

// The field is cleared, displays nothing
field.clear();

field.set('invalid set');

// This will return false
isValid = field.checkValidity();

// Get the validity state, as per the HTML5 spec
var validityState = field.getValidityState();

Example of using a custom validator

var ValidatorPlugin = AFrame.FieldPluginValidation.extend( {
    validate: function() {
        var valid = ValidatorPlugin.sc.validate.call( this );
        if( valid ) {
             // do custom validation setting valid variable
        }
        return valid;
    }
} );

var field = AFrame.Field.create( {
    target: '#numberInput',
    plugins: [ ValidatorPlugin ]
} );

field.validate();

Constructor

Constructor	Parameters	Returns
`AFrame.FieldPluginValidation( )`

Methods

Methods	Returns	Description
`checkValidity( )`	`boolean`	↑ Validate the field. A field will validate if 1) Its form element does not have the required attribute, or 2) the field has a length. Sub classes can override this to perform more specific validation schemes. The HTML5 spec specifies checkValidity as the method to use to check the validity of a form field. Calling this will reset any validation errors previously set and start with a new state. `var isValid = field.checkValidity();` Returns: `<boolean>` true if field is valid, false otw.
`getCriteria( )`	`object` private	↑ Get the field's validation criteria Returns: `<object>` criteria for the field
`getValidityState( )`	`AFrame.FieldValidityState`	↑ Get the current validity state for a field. `var validityState = field.getValidityState( field );` Returns: `<AFrame.FieldValidityState>` the current validity state of the field.
`setCustomValidity( customError )`	`void`	↑ Set a custom error. In the AFrame.FieldValidityState object returned by getValidityState, a custom error will have the customError field set to this message `field.setCustomValidity( 'Names must start with a letter' );` Parameters: `customError <string>` the error message to display
`setError( errorType )`	`void`	↑ Set an error. See AFrame.FieldValidityState `field.setError( 'valueMissing' );` Parameters: `errorType <string>`
`updateValidityState( validate )`	`void` private	↑ Update the field's validity state. Parameters: `validate <boolean>` whether to perform actual validation or not
`validate( )`	`boolean`	↑ This should not be called directly, instead checkValidity should be. Do the actual validation on the field. Should be overridden to do validations. `var isValid = field.validate();` Returns: `<boolean>` true if field is valid, false otw.

Methods inherited from AFrame.ObservablesMixin

Methods	Notes
`bindEvent`	↑
`bindTo`	↑
`getEventObject`	↑
`isEventTriggered`	↑
`proxyEvents`	↑
`setEventData`	↑
`triggerEvent`	↑
`unbindAll`	↑
`unbindEvent`	↑
`unbindTo`	↑
`unbindToAll`	↑

Methods inherited from AFrame.Plugin

Methods	Notes
`getPlugged`	↑
`onPluggedInit`	↑

Methods inherited from AFrame.AObject

Methods	Notes
`addChild`	↑
`bindEvents`	↑
`getCID`	↑
`getConfig`	↑
`init`	↑
`removeChild`	↑
`teardown`	↑
`triggerProxy`	↑

Events inherited from AFrame.AObject

Events	Notes
`onInit`	↑
`onTeardown`	↑

Configuration Attributes inherited from AFrame.AObject

Attributes	Notes
`{cid} cid`	↑