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:
|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
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:
TipYou should look at the principles when integrating FormValidation with other plugins