b1tch2c0d3

YUI Datatable – Custom Validator Example

This is the validator I am using to insure that a height (or float) was entered (5’10″, 5′ 10″, 5.10 5 10), and that text (tall, short) was not entered and covert a valid non-float value entered (5’10″, 5′ 10″, 5 10) to a float (5.10), which is how I want to store the value in the database.

Now that we have a custom validator created, it would be helpful to know where to call it from. A validator is an object parameter to the object that is sent to a textboxCellEditor.

The textboxCellEditor is an object parameter to the object that defines the column, in the array of objects that is sent to the datatable constructor.

STWPT.validateHeight = function (oData)
{
    var pattern; // regexp pattern holder

    // heightFormat is expected to be a decimal number for height

    // add a space if none was provided (5'10")
    // 5'10" -> 5' 10 - note the trailing non-digit characters are dropped
    pattern = /'(\d+)/g
    if (pattern.test(oData)) { oData = oData.replace(pattern, " $1"); }

    // turn a space into a decimal - 5 10, 5' 10" -> 5.10, 5' 10"
    pattern = / /g;
    if (pattern.test(oData)) { oData = oData.replace(pattern, '.'); }

    // remove all single and double quotes - 5' 10", 5'.10" -> 5.10
    pattern = /["']/g
    if (pattern.test(oData)) { oData = oData.replace(pattern, ''); }

    // enforce x.0x format - 5' 1" -> 5' 01" -> 5.01
    pattern = /\.([1-9])$/
    if (pattern.test(oData)) { oData = oData.replace(pattern, '.0$1')};

    // at this point we should have a float, which should eval > 0

    if (oData > 0) { return oData; }

    // validation only succeeds if a value is returned
}

The following is a snippet out of a larger script that shows just the pieces that connect the datatable creation to the custom validator shown above.

var heightEditor = new YAHOO.widget.TextboxCellEditor({
    disableBtns: false,
    asyncSubmitter: submitter,
    validator: STWPT.validateHeight
});

var myColumnDefs = [{
    key: 'height',
    label: 'Height',
    sortable: true,
    resizeable: true,
    editor: heightEditor,
    formatter: STWPT.formatHeight
}];

var myDataTable = new YAHOO.widget.DataTable('athletes-datatable', myColumnDefs, myDataSource);

Leave a Comment so far
Leave a comment