Adding dynamic field

When working with complex form, the fields might be added to (or remove from) the form dynamically. The newly added fields also need to be validated.

This example demonstrates a sample scenario where you have to solve validating dynamic fields problem. Before going to the details, there are some methods and events you need to know:

Methods and events	Description
addField() method	Adding new field
removeField() method	Removing new field
core.field.added event	Called after adding new field
core.field.removed event	Called after removing given field

Adding fields with different names

The following form manages the wish list of books you would love to buy. Each book must have three properties which are title, ISBN number and price (in dollar).

Assume that, due to the required naming convention from server, the fields for these properties are named as book[i].title, book[i].isbn and book[i].price, where i is the index number of book which can be 0, 1, 2, and so forth.

Adding fields with different names

Using other library for added fields

Sometime, the added fields aren't just simply a normal input such as text box, text area. They can be used with other plugins such as a date picker, an auto-completed control, etc. In this case, the field should be initially as a normal text input, and then integrated with other plugin after being added.

The following sample code attaches a date picker to newly added input by triggering the core.field.added event:

// The index of row
let rowIndex = 0;

const demoForm = document.getElementById('demoForm');

const fv = FormValidation.formValidation(demoForm, {
    fields: {
        'task[0].title': titleValidators,
        'task[0].dueDate': dueDateValidators,
    },
    plugins: {
        ...
    },
}).on('core.field.added', function(e) {
    if (e.field === 'task[' + rowIndex + '].dueDate') {
        // The added field is due date
        attachPickAdayPicker(e.field);
    }
});

const attachPickAdayPicker = function(fieldName) {
    new Pikaday({
        field: demoForm.querySelector('[name="' + fieldName + '"]'),
        onSelect: function() {
            // Revalidate the date field
            if (fv) {
                fv.revalidateField(fieldName);
            }
        }
    });
};

// Attach pickaday to the first existing due date
attachPickAdayPicker('task[0].dueDate');

You should look at the principles when integrating FormValidation with other plugins

Using other library for added fields