Use the following code to create a basic inputEx field.
| 1 | new inputEx.StringField({parentEl: 'container1'}); |
| 2 | |
| view plain | print | ? |
You can set a default value by specifying the 'value' property in the options object.
| 1 | new inputEx.StringField({value: 'inputEx rocks', parentEl: 'container2'}); |
| view plain | print | ? |
You can set the size of the input.
| 1 | new inputEx.StringField({size: 40, value: 'size is set to 40 (default is 20)', parentEl: 'container3'}); |
| view plain | print | ? |
You can add a maximum/minimum length on string fields :
| 1 | new inputEx.StringField({value: '0123456789', showMsg: true, minLength: 3, maxLength: 10, parentEl: 'container4'}); |
| view plain | print | ? |
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.
| 1 | new inputEx.StringField({required: true, showMsg: true, parentEl: 'container5'}); |
| view plain | print | ? |
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.)
| 1 | new inputEx.StringField({label: 'Enter your age', regexp: /^[0-9]*$/, parentEl: 'container6'}); |
| view plain | print | ? |
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).
| 1 | new inputEx.StringField({showMsg: true,regexp: inputEx.regexps.email, value: 'wrong@email', parentEl: 'container7'}); |
| view plain | print | ? |
You can call the methods 'disable' or 'enable' to set the state of the field.
| 1 | var field = new inputEx.StringField({value: 'This field is disabled', parentEl: 'container8'}); |
| 2 | field.disable(); |
| view plain | print | ? |
How to listen to the updated event :
| 1 | var el = YAHOO.util.Dom.get('container9'); |
| 2 | var field = new inputEx.StringField({parentEl: el }); |
| 3 | var logDiv = inputEx.cn('div', null, null, "Log :"); |
| 4 | el.appendChild(logDiv); |
| 5 | field.updatedEvt.subscribe(function(e,params) { |
| 6 | var val = params[0]; |
| 7 | logDiv.innerHTML += "Updated at "+(new Date())+" with value: "+val; |
| 8 | }); |
| view plain | print | ? |
Display a text when the field is empty.
| 1 | new inputEx.StringField({parentEl: 'container10', typeInvite: 'lastname', description: 'Enter your lastname'}); |
| view plain | print | ? |
Config with various options : typeInvite, required, minLength, trim -- Test setValue and getValue methods
| 1 | var field1 = new inputEx.StringField({ |
| 2 | parentEl: 'container11', |
| 3 | typeInvite: 'lastname', |
| 4 | description: 'Enter your lastname', |
| 5 | minLength:10, |
| 6 | trim:true, // getValue will return a trimed value |
| 7 | required:true, |
| 8 | showMsg:true |
| 9 | }); |
| 10 | |
| 11 | var exampleDiv = YAHOO.util.Dom.get('container11'); |
| 12 | |
| 13 | var button1 = inputEx.cn('button', null, null, 'setValue()'); |
| 14 | exampleDiv.appendChild(button1); |
| 15 | YAHOO.util.Event.addListener(button1, 'click', function() { |
| 16 | field1.setValue("I've been set by setValue"); |
| 17 | }); |
| 18 | |
| 19 | var button2 = inputEx.cn('button', null, null, 'getValue()'); |
| 20 | exampleDiv.appendChild(button2); |
| 21 | YAHOO.util.Event.addListener(button2, 'click', function() { |
| 22 | alert(field1.getValue()); |
| 23 | }); |
| view plain | print | ? |
Use the focus method
| 1 | var field12 = new inputEx.StringField({parentEl: 'container12'}); |
| 2 | |
| 3 | var exampleDiv = YAHOO.util.Dom.get('container12'); |
| 4 | |
| 5 | var button3 = inputEx.cn('button', null, null, 'focus()'); |
| 6 | exampleDiv.appendChild(button3); |
| 7 | YAHOO.util.Event.addListener(button3, 'click', function() { field12.focus(); }); |
| view plain | print | ? |