inputEx - StringField Usage

Basic StringField creation

Use the following code to create a basic inputEx field.

new YAHOO.inputEx.StringField({parentEl: 'container1' });

With a default value

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

new YAHOO.inputEx.StringField({value: 'inputEx rocks', parentEl: 'container2'});

Changing the size

You can set the size of the input.

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

Maximum and minimum length

You can add a maximum/minimum length on string fields :

new YAHOO.inputEx.StringField({value: '0123456789', showMsg: true, minLength: 3, maxLength: 10, parentEl: 'container4'});

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.

new YAHOO.inputEx.StringField({required: true, showMsg: true, parentEl: 'container5'});

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.)

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

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).

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

Enabling/Disabling inputs

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

var field = new YAHOO.inputEx.StringField({value: 'This field is disabled', parentEl: 'container8'}); field.disable();

Updated event

How to listen to the updated event :

var el = YAHOO.util.Dom.get('container9'); var field = new YAHOO.inputEx.StringField({parentEl: el }); var logDiv = YAHOO.inputEx.cn('div', null, null, "Log :<br />"); el.appendChild(logDiv); field.updatedEvt.subscribe(function(e,params) { var val = params[0]; logDiv.innerHTML += "Updated at "+(new Date())+" with value: "+val+"<br />"; });

Type invitation

Display a text when the field is empty.

new YAHOO.inputEx.StringField({parentEl: 'container10', typeInvite: 'lastname', description: 'Enter your lastname'});

Multiple options

Check multiple options config : typeInvite, required, minLength -- Test setValue and getValue methods

var field1 = new YAHOO.inputEx.StringField({ parentEl: 'container11', typeInvite: 'lastname', description: 'Enter your lastname', minLength:10, required:true, showMsg:true }); var exampleDiv = YAHOO.util.Dom.get('container11'); var button1 = inputEx.cn('button', null, null, 'setValue()'); exampleDiv.appendChild(button1); YAHOO.util.Event.addListener(button1, 'click', function() { field1.setValue("I've been set by setValue"); }); var button2 = inputEx.cn('button', null, null, 'getValue()'); exampleDiv.appendChild(button2); YAHOO.util.Event.addListener(button2, 'click', function() { alert(field1.getValue()); });

Focus the field

Use the focus method

var field12 = new YAHOO.inputEx.StringField({parentEl: 'container12'}); var exampleDiv = YAHOO.util.Dom.get('container12'); var button3 = inputEx.cn('button', null, null, 'focus()'); exampleDiv.appendChild(button3); YAHOO.util.Event.addListener(button3, 'click', function() { field12.focus(); });