inputEx - Group Usage

Basic Group creation

Use the following code to create a basic inputEx group.

Tell us about yourself...
1var contactFormFields = [ 
2        {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]}, 
3        {label: 'Firstname', name: 'firstname', required: true}, 
4        {label: 'Lastname', name: 'lastname', value:'Dupont'}, 
5        {type:'email', label: 'Email', name: 'email', required: true, showMsg: true}, 
6        {type:'radio', label: 'Happy to be there ?', name: 'happy', display:'vertically', choices:[{value: "y", label:"yes"}, {value:"n", label:"no"}]}, 
7        {type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"}, 
8        {type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"}, 
9        {type:'boolean', label: ' ', name: 'red', rightLabel:"red"}, 
10        {type:'url', label: 'Website', name:'website'
11]; 
12new inputEx.Group({parentEl: 'container1', fields: contactFormFields, legend: 'Tell us about yourself...'}); 
view plain | print | ?

Composition

The inputEx.Group class inherits from inputEx.Field

1var contactFormFields = [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]}, {label: 'Firstname', name: 'firstname', required: true}, {label: 'Lastname', name: 'lastname', value:'Dupont'}, {type:'email', label: 'Email', name: 'email', required: true, showMsg: true}, {type:'radio', label: 'Happy to be there ?', name: 'happy', values:["y","n"], choices:["yes","no"]}, {type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"}, {type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"}, {type:'boolean', label: ' ', name: 'red', rightLabel:"red"}, {type:'url', label: 'Website', name:'website'} ]; 
2 
3new inputEx.ListField({ 
4    elementType: { 
5        type: 'group'
6        fields: contactFormFields 
7    }, 
8    parentEl: 'container2' 
9}); 
view plain | print | ?

Updated event

How to listen to the updated event :

Log :
1var contactFormFields = [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]}, {label: 'Firstname', name: 'firstname', required: true}, {label: 'Lastname', name: 'lastname', value:'Dupont'}, {type:'email', label: 'Email', name: 'email', required: true, showMsg: true}, {type:'radio', label: 'Happy to be there ?', name: 'happy', values:["y","n"], choices:["yes","no"]}, {type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"}, {type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"}, {type:'boolean', label: ' ', name: 'red', rightLabel:"red"}, {type:'url', label: 'Website', name:'website'} ]; 
2 
3var el = YAHOO.util.Dom.get('container3'); 
4var group3 = new inputEx.Group({parentEl: el, fields: contactFormFields }); 
5var logDiv = inputEx.cn('div'nullnull"Log :"); 
6el.appendChild(logDiv); 
7group3.updatedEvt.subscribe(function() { 
8    logDiv.innerHTML += "Updated at "+(new Date()); 
9    logDiv.appendChild(inputEx.cn('br')); 
10}); 
11 
12var setValueButton = inputEx.cn('button'nullnull"SetValue"); 
13YAHOO.util.Event.addListener(setValueButton, 'click'function() { 
14    group3.setValue({ 
15        title: 'Mme'
16        firstname: 'Eric'
17        lastname: 'Abouaf',  
18        happy: "y"
19        email: 'something@email.com'
20        website: 'http://neyric.github.com/inputex'
21        yellow: true 
22    }); 
23    // when you don't pass all values, default values are applied 
24    // to missing fields (e.g. : 'blue' and 'red' fields) 
25     
26}); 
27el.appendChild(setValueButton); 
view plain | print | ?

Collapsible

Collapsible

User Informations
1var contactFormFields = [ {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }]}, {label: 'Firstname', name: 'firstname', required: true}, {label: 'Lastname', name: 'lastname', value:'Dupont'}, {type:'email', label: 'Email', name: 'email', required: true, showMsg: true}, {type:'radio', label: 'Happy to be there ?', name: 'happy', values:["y","n"], choices:["yes","no"]}, {type:'boolean', label: 'Favorite colors ?', name: 'yellow', rightLabel:"yellow"}, {type:'boolean', label: ' ', name: 'blue', rightLabel:"blue"}, {type:'boolean', label: ' ', name: 'red', rightLabel:"red"}, {type:'url', label: 'Website', name:'website'} ]; 
2 
3new inputEx.Group({parentEl: 'container4', fields: contactFormFields, legend: 'User Informations', collapsible: true}); 
view plain | print | ?

Composition

Composition

Phone number
1var contactFormFields2 = [  
2        {type: 'select', label: 'Title', name: 'title', choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, 
3        {label: 'Firstname', name: 'firstname', required: true }, 
4        {label: 'Lastname', name: 'lastname', value:'Dupont', required:false }, 
5        {type:'email', label: 'Email', name: 'email', required: true, showMsg: true}, 
6        {type:'boolean', label: 'Happy to be there ?', name: 'happy'}, 
7        {type:'url', label: 'Website', name:'website'
8]; 
9contactFormFields2.push({ 
10    type: 'group'
11    name: 'phone'
12    collapsible: true
13    legend: 'Phone number'
14    fields: [ 
15        { label: 'Home', name: 'home' }, 
16        { label: 'Business', name: 'business' }, 
17        { label: 'Mobile',name: 'mobile' }, 
18        { label: 'Fax', name: 'fax' } 
19    ] 
20}); 
21var field5 = new inputEx.Group({parentEl: 'container5', fields: contactFormFields2}); 
22var button5 = inputEx.cn('button'nullnull'Get value'); 
23YAHOO.util.Dom.get('container5').appendChild(button5); 
24YAHOO.util.Event.addListener(button5, "click"function() { 
25    alert( YAHOO.lang.JSON.stringify(field5.getValue()) ); 
26}); 
27var setValueButton = inputEx.cn('button'nullnull"SetValue"); 
28YAHOO.util.Event.addListener(setValueButton, 'click'function() { 
29    field5.setValue({ 
30        title: 'Mme'
31        firstname: 'Eric'
32        lastname: 'Abouaf',  
33        happy: false
34        email: 'something@email.com'
35        website: 'http://neyric.github.com/inputex'
36        phone:{ 
37            home:"911"
38           fax:"911" 
39        } 
40    }); 
41}); 
42var el = YAHOO.util.Dom.get('container5'); 
43el.appendChild(setValueButton); 
44var validButton = inputEx.cn('button'nullnull'Validate'); 
45YAHOO.util.Dom.get('container5').appendChild(validButton); 
46YAHOO.util.Event.addListener(validButton, "click"function() { 
47    alert( field5.validate() ); 
48}); 
view plain | print | ?

Field descriptions

Specify field descriptions

User Informations
Select your gender
Your firstname
Your lastname
Your email. We wont send you any commercial information
Check this box if you are happy to be there
Your blog url
1var descriptedFields = [  
2        { type: 'select', label: 'Title', name: 'title', description: 'Select your gender',  choices: [{ value: 'Mr' }, { value: 'Mrs' }, { value: 'Ms' }] }, 
3        { label: 'Firstname', description: 'Your firstname', name: 'firstname', required: true, value:'Jacques' }, 
4        { label: 'Lastname', description: 'Your lastname', name: 'lastname', value:'Dupont' }, 
5        { type:'email', description: 'Your email. We wont send you any commercial information', label: 'Email', name: 'email'}, 
6        { type:'boolean', description: 'Check this box if you are happy to be there', label: 'Happy to be there ?', name: 'email'}, 
7        { type:'url', description: 'Your blog url', label: 'Website', name:'website'
8]; 
9new inputEx.Group({parentEl: 'container6', fields: descriptedFields, legend: 'User Informations'}); 
view plain | print | ?

Flatten output value for a sub-group

The parent group will then flatten the sub-group value within its value.

In this example, we return {firstname: ..., lastname: ..., title:... } instead of { MySubForm: {firstname: ..., lastname: ...}, title:... }.

Flatten demo
Firstname and Lastname are within the same sub-group
1var flattenGroup = new inputEx.Group({ 
2    parentEl: 'container7',  
3    legend: 'Flatten demo',  
4    name: "MyForm"
5    fields: [ 
6      {  
7          type: 'group'
8          name: "MySubForm"
9          flatten: true
10          fields: [ 
11             { label: 'Firstname', name: 'firstname' }, 
12             { label: 'Lastname', name: 'lastname', description: "Firstname and Lastname are within the same sub-group" } 
13          ] 
14      }, 
15      { label: 'Title', name: 'title' } 
16   ] 
17}); 
18flattenGroup.updatedEvt.subscribe(function(e,params) { 
19    var value = params[0]; 
20    YAHOO.util.Dom.get('container7').appendChild( inputEx.cn('div',null,null, YAHOO.lang.JSON.stringify(value)) ); 
21}); 
view plain | print | ?

Set error messages

Use the setErrors method on Group or Form instances to set error messages. The field will show the message only if the showMsg option is enabled on this field.

This feature is helpful for Ajax forms with server-side validation.

Cannot be empty
Must be a number
1var myForm = new inputEx.Group({ 
2    parentEl: 'container8',  
3    name: "MyForm"
4    fields: [ 
5     {label: 'Firstname', name: 'firstname', showMsg: true}, 
6     {label: 'Age', name: 'age', showMsg: true}, 
7     {label: 'Title', name: 'title'
8   ] 
9}); 
10 
11myForm.setErrors({ 
12    firstname: "Cannot be empty"
13    age: "Must be a number"
14    title: "Cannot be empty !!! (not visible because no showMsg)" 
15}); 
16 
17// Equivalent call : 
18myForm.setErrors([ 
19    ["firstname""Cannot be empty"], 
20    ["age""Must be a number"], 
21    ["title""Cannot be empty !!! (not visible because no showMsg)"
22]); 
view plain | print | ?