Fork me on GitHub

Example: Basic string field creation

How to create a string field.

Basic StringField creation

Use the following code to create a basic inputEx field.

With a default value

You can set a default value by specifying the 'value' property in the options object.

Changing the size

You can set the size of the input.

Maximum and minimum length

You can add a minimum/maximum length on string fields (e.g. min=3 / max=5):

Required

If the 'required' property is set, the 'validate' method will return false if the field is empty. In a form, the 'validate' method will be called on each field and will return false if at least one field doesn't validate.

Regular Expression 1

Here is an example on how to check the value with a regular expression. (It is better to use the IntegerField, but this is a simple example.)

Regular Expression 2

The basic Field class can use regular expressions to validate the field content. Here is an example with this wonderful email regular expression (note that there is an Email Field class).

Enabling/Disabling inputs

You can call the methods 'disable' or 'enable' to set the state of the field.

Updated event

How to listen to the updated event :

Placeholder

Display a text when the field is empty.

Various options

Config with various options : placeholder, required, minLength, trim  --  Test setValue and getValue methods

Focus the field

Use the focus method

Position of error messages

Display error messages below the field

HTML

<div id="field-container"></div>

JavaScript

Implementation

YUI().use('inputex-string',function(Y) {


    // Example 1
    new Y.inputEx.StringField({parentEl: 'container1'});

    // Example 2
    new Y.inputEx.StringField({value: 'inputEx rocks', parentEl: 'container2'});

    // Example 3
    new Y.inputEx.StringField({size: 40, value: 'size is set to 40 (default is 20)', parentEl: 'container3'});

    // Example 4
    new Y.inputEx.StringField({value: 'ab', showMsg: true, minLength: 3, maxLength: 5, parentEl: 'container4'});

    // Example 5
    new Y.inputEx.StringField({required: true, showMsg: true, parentEl: 'container5'});

    // Example 6
    new Y.inputEx.StringField({label: 'Enter your age', regexp: /^[0-9]*$/, parentEl: 'container6'});

    // Example 7
    new Y.inputEx.StringField({showMsg: true,regexp: Y.inputEx.regexps.email, value: 'wrong@email', parentEl: 'container7'});

    // Example 8
    new Y.inputEx.StringField({value: 'This field is disabled', parentEl: 'container8', disabled: true});
    // or use the field.disable() method

    // Example 9

    var el = Y.one('#container9');
    var field = new Y.inputEx.StringField({parentEl: el });
    var logDiv = Y.inputEx.cn('div', null, null, "Log :");
    el.appendChild(logDiv);
    field.on("updated",function(val) {
        logDiv.innerHTML += "Updated at " + (new Date()) + " with value: " + val + "<br />";
    });

    // Example 10
    new Y.inputEx.StringField({parentEl: 'container10', placeholder: 'lastname', description: 'Enter your lastname'});

    // Example 11
    var field1 = new Y.inputEx.StringField({
        parentEl: 'container11',
        placeholder: 'lastname',
        description: 'Enter your lastname',
        minLength:10,
        trim:true, // getValue will return a trimed value
        required:true,
        showMsg:true
    });

    var exampleDiv = Y.one('#container11');

    var button1 = Y.inputEx.cn('button', null, null, 'setValue()');
    exampleDiv.appendChild(button1);
    Y.on('click', function() {
        field1.setValue("I've been set by setValue");
    }, button1);

    var button2 = Y.inputEx.cn('button', null, null, 'getValue()');
    exampleDiv.appendChild(button2);
    Y.on( 'click', function() {
        alert(field1.getValue());
    },button2);

    // Example 12
    var field12 = new Y.inputEx.StringField({parentEl: 'container12'});

    var exampleDiv = Y.one('#container12');

    var button3 = Y.inputEx.cn('button', null, null, 'focus()');
    exampleDiv.appendChild(button3);
    Y.on('click', function() { field12.focus(); }, button3);

    // Example 13
    var field13 = new Y.inputEx.StringField({
        parentEl: 'container13',
        messagePosition : "below",
        showMsg: true,
        minLength: 3,
        maxLength: 5,
        value: 'ab'
    });

    var exampleDiv = Y.one('#container13');

});