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:

Method/Event 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.

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:

Tip

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