Use the following code to create a basic inputEx group.
1 | var 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 | ]; |
12 | new inputEx.Group({parentEl: 'container1', fields: contactFormFields, legend: 'Tell us about yourself...'}); |
view plain | print | ? |
The inputEx.Group class inherits from inputEx.Field
1 | var 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 | |
3 | new inputEx.ListField({ |
4 | elementType: { |
5 | type: 'group', |
6 | fields: contactFormFields |
7 | }, |
8 | parentEl: 'container2' |
9 | }); |
view plain | print | ? |
How to listen to the updated event :
1 | var 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 | |
3 | var el = YAHOO.util.Dom.get('container3'); |
4 | var group3 = new inputEx.Group({parentEl: el, fields: contactFormFields }); |
5 | var logDiv = inputEx.cn('div', null, null, "Log :"); |
6 | el.appendChild(logDiv); |
7 | group3.updatedEvt.subscribe(function() { |
8 | logDiv.innerHTML += "Updated at "+(new Date()); |
9 | logDiv.appendChild(inputEx.cn('br')); |
10 | }); |
11 | |
12 | var setValueButton = inputEx.cn('button', null, null, "SetValue"); |
13 | YAHOO.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 | }); |
27 | el.appendChild(setValueButton); |
view plain | print | ? |
Collapsible
1 | var 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 | |
3 | new inputEx.Group({parentEl: 'container4', fields: contactFormFields, legend: 'User Informations', collapsible: true}); |
view plain | print | ? |
Composition
1 | var 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 | ]; |
9 | contactFormFields2.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 | }); |
21 | var field5 = new inputEx.Group({parentEl: 'container5', fields: contactFormFields2}); |
22 | var button5 = inputEx.cn('button', null, null, 'Get value'); |
23 | YAHOO.util.Dom.get('container5').appendChild(button5); |
24 | YAHOO.util.Event.addListener(button5, "click", function() { |
25 | alert( YAHOO.lang.JSON.stringify(field5.getValue()) ); |
26 | }); |
27 | var setValueButton = inputEx.cn('button', null, null, "SetValue"); |
28 | YAHOO.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 | }); |
42 | var el = YAHOO.util.Dom.get('container5'); |
43 | el.appendChild(setValueButton); |
44 | var validButton = inputEx.cn('button', null, null, 'Validate'); |
45 | YAHOO.util.Dom.get('container5').appendChild(validButton); |
46 | YAHOO.util.Event.addListener(validButton, "click", function() { |
47 | alert( field5.validate() ); |
48 | }); |
view plain | print | ? |
Specify field descriptions
1 | var 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 | ]; |
9 | new inputEx.Group({parentEl: 'container6', fields: descriptedFields, legend: 'User Informations'}); |
view plain | print | ? |
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:... }.
1 | var 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 | }); |
18 | flattenGroup.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 | ? |
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.
1 | var 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 | |
11 | myForm.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 : |
18 | myForm.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 | ? |