Fork me on GitHub

Example: Basic integer field creation

How to create a integer field.

Basic IntegerField creation

Use the following code to create a basic inputEx IntegerField.

Min & Max

Check values are within a range (in this example: min=3 / max=10)

Negative values

Set the negative attribute to true if you allow negative values.

IntegerField with options

You can use all the options inherited form StringField. In this example: the value is trimmed, the minimum length required is 3 digits, and the number must start with the digit "1" (enforced via the 'regexp' option).

HTML

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

JavaScript

Implementation

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

    // Example 1
    var field = new Y.inputEx.IntegerField({ parentEl: 'container1', showMsg: true });
    field.on('updated', function(value) {
        Y.one('#valueContainer1').innerHTML = "value: " + value + ", type: " + typeof(value);
    });

    // Example 2
    new Y.inputEx.IntegerField({ parentEl: 'container4', showMsg: true, min:3, max:10 });

    // Example 3
    new Y.inputEx.IntegerField({ parentEl: 'container3', showMsg: true, negative:true, value: -12 });

    // Example 4
    var field = new Y.inputEx.IntegerField({
        parentEl: 'container2',
        showMsg: true,
        required: true,
        placeholder: "Enter a number",
        trim: true,
        minLength: 3,
        regexp: /^1/
    });
    field.on('updated', function(value) {
        Y.one('#valueContainer2').innerHTML = "value: " + value + ", type: " + typeof(value);
    });

});