Skip to main content

Nested fields

Informel supports nested fields (arrays or objects or arrays of objects). Just specify the object path in the name attribute of the field. For example, the following form:

<inform-el>
<form>
<label>
First Name
<input type="text" name="users[0].name.first" value="John" />
</label>
<label>
Last Name
<input type="text" name="users[0].name.last" value="Doe" />
</label>
<button type="submit">Submit</button>
</form>
</inform-el>

will yield the following values:

{
users: [{
name: {
first: 'John',
last: 'Doe'
}
}];
}

For arrays, users[0].name is equivalent to users.0.name.

Here is a live example:

Custom validation with nested fields

For setting custom validation rules, just return the full field path from the validationHandler method:

document.querySelector('inform-el').validationHandler = ({ values }) => {
if(values.users[0].name.first===' '){
return {
'values.users[0].name.first': 'No blank values!'
}
}
};

Check out the js tab of the live example above!