[up-validate] attribute you can implement forms where the state of some fields
depende on the value of other fields.
This is a form to purchase postage for international parcels:
The fields in this form have many dependencies between them:
We can implement this form with three
<form method="post" action="/purchases"> <fieldset> <label for="content">Continent</label> <select name="continent" id="continent" up-validate="#country">...</select> <!-- mark-phrase "up-validate" --> </fieldset> <fieldset> <label for="country">Country</label> <select name="country" id="country" up-validate="#price">...</select> <!-- mark-phrase "up-validate" --> </fieldset> <fieldset> <label for="weight">Weight</label> <input name="weight" id="weight" up-validate="#price"> kg <!-- mark-phrase "up-validate" --> </fieldset> <fieldset> <label for="price">Price</label> <output id="price">23 €</output> </fieldset> <button>Buy stamps</button> </form>
When a field is changed, Unpoly will automatically submit the form with an additional
HTTP header. Upon seeing this header, the server is expected to render a new form state from the
form values in the request parameters. See this example
for control flow on the server.
When the server responds with the re-rendered form state, Unpoly will update the
target selector from the changed field's
For instance, when the continent is field is changed, the country field is updated.
A field with
[up-validate] may update multiple fragments
by separating their target selectors with a comma.
For instance, when the user changes the continent, the following would update the price preview in addition to the country select:
<select name="continent" up-validate="#country, #price"> ... </select>
Custom implementations of dependent fields will often exhibit race conditions, e.g. when the user is quickly changing fields while requests are still in flight.
Such issues are solved with
[up-validate]. The form will eventually show a consistent state,
regardless of how fast the user clicks or how slow the network is. In particular:
up.validate()are batched into a single request with multiple targets.
Let's walk through a challenging scenario using the postage form example above:
Once the last response is processed, all fields and the price preview show consistent values.
If you prefer to completely prevent user input during validation, give the form an
[up-watch-disable] attribute. This will disable all form fields while validation requests are in flight:
<form method="post" action="/purchases" up-watch-disable> <!-- mark-phrase "up-watch-disable" --> ... </form>
You may also assign
[up-watch-disable] to individual fields, or any element that contains fields.
Also see disabling fields while working.