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!