inputEx - Group Usage

Basic Group creation

Use the following code to create a basic inputEx group.

Composition

The inputEx.Group class inherits from inputEx.Field

Updated event

How to listen to the updated event :

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'} ];
			
			var el = YAHOO.util.Dom.get('container3');
			var group3 = new inputEx.Group({parentEl: el, fields: contactFormFields });
			var logDiv = inputEx.cn('div', null, null, "Log :");
			el.appendChild(logDiv);
			group3.updatedEvt.subscribe(function() {
				logDiv.innerHTML += "Updated at "+(new Date());
				logDiv.appendChild(inputEx.cn('br'));
			});

var setValueButton = inputEx.cn('button', null, null, "SetValue");
			YAHOO.util.Event.addListener(setValueButton, 'click', function() {
				group3.setValue({
					title: 'Mme',
					firstname: 'Eric',
					lastname: 'Abouaf', 
					happy: "y",
					email: 'something@email.com',
					website: 'http://neyric.github.com/inputex',
					yellow: true
				});
				// when you don't pass all values, default values are applied
				// to missing fields (e.g. : 'blue' and 'red' fields)
				
			});
			el.appendChild(setValueButton);

Collapsible

Collapsible

Composition

Composition

var contactFormFields2 = [ 
							{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', required:false },
							{type:'email', label: 'Email', name: 'email', required: true, showMsg: true},
							{type:'boolean', label: 'Happy to be there ?', name: 'happy'},
							{type:'url', label: 'Website', name:'website'}
					];
					contactFormFields2.push({
						type: 'group',
						name: 'phone',
						collapsible: true,
						legend: 'Phone number',
						fields: [
							{ label: 'Home', name: 'home' },
							{ label: 'Business', name: 'business' },
							{ label: 'Mobile',name: 'mobile' },
							{ label: 'Fax', name: 'fax' }
						]
					});
					var field5 = new inputEx.Group({parentEl: 'container5', fields: contactFormFields2});
					var button5 = inputEx.cn('button', null, null, 'Get value');
					YAHOO.util.Dom.get('container5').appendChild(button5);
					YAHOO.util.Event.addListener(button5, "click", function() {
						alert( YAHOO.lang.JSON.stringify(field5.getValue()) );
					});
					var setValueButton = inputEx.cn('button', null, null, "SetValue");
					YAHOO.util.Event.addListener(setValueButton, 'click', function() {
						field5.setValue({
							title: 'Mme',
							firstname: 'Eric',
							lastname: 'Abouaf', 
							happy: false,
							email: 'something@email.com',
							website: 'http://neyric.github.com/inputex',
							phone:{
								home:"911",
							   fax:"911"
							}
						});
					});
					var el = YAHOO.util.Dom.get('container5');
					el.appendChild(setValueButton);
					var validButton = inputEx.cn('button', null, null, 'Validate');
					YAHOO.util.Dom.get('container5').appendChild(validButton);
					YAHOO.util.Event.addListener(validButton, "click", function() {
						alert( field5.validate() );
					});

Field descriptions

Specify field descriptions

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:... }.

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.