Forms & Validation demos

Dynamic Fields

Please note :

It is important to know that this demo is not a SPA and doesn't use any data management javascript library. There is no "store" as the source of the dynamic elements.

This demo shows how the form model can be manipulated freely on the client side simply using the "name" attributes on a traditional HTML form. It is fully working even when javascript is disabled.

We're going to provide a true SPA demo in a near future.

Add tags and new users and submit the form to see the validations in action! All existing field are required and have a minimum length. Also, tags must all be different in a given User section.

User #1
#1
#2
#3

Code

How to

The explanation of this demo will be quite short. We encourage you to look at the source to see how it actually works!

Basically, this demo shows how the fields of a traditional HTML form can be manipulate to change the underlying form model. Spincast uses the "name" attributes of the fields of a form to dynamically build a JsonObject representing this form.

When a form is submitted, we get a JsonObject which represents it : 

Form form = context.request().getFormOrCreate("demoForm");
context.response().addForm(form);

The structure of this form (which is also a JsonObject under the hood!) depends on the names of the submitted fields. If you add or remove some fields client-side, the form object will reflect those modifications. This allows great flexibility when using traditional HTML forms (vs. SPA or using data management javascript libraries) since the model can be dynamically changed, client-side.

Also, by adding back that dynamic JsonObject to the response model, you can re-render the form and all the fields are kept, as they were submitted.

More info

Make sure you also try the first demo of this section, Introduction - Single field which introduces forms and validation using Spincast.

Otherwise, you can learn everything about forms and validation in the dedicated Forms section of the documentation.