This request header contains the names of the form fields being validated.
When seeing this header, the server is expected
to validate (but not save) the form submission and render a new form state with validation errors.
See the documentation for [up-validate]
for more information
on how server-side validation works in Unpoly.
Let's look at a registration form that uses [up-validate]
to validate form groups
as the user completes fields:
<form action="/users">
<fieldset>
<label for="email" up-validate>E-mail</label> <!-- mark-phrase "up-validate" -->
<input type="text" id="email" name="email">
</fieldset>
<fieldset>
<label for="password" up-validate>Password</label> <!-- mark-phrase "up-validate" -->
<input type="password" id="password" name="password">
</fieldset>
<button type="submit">Register</button>
</form>
When the email
input is changed, Unpoly will submit the form with an
additional X-Up-Validate
header:
X-Up-Validate: email
X-Up-Target: fieldset:has(#email)
If multiple validations are batched into a single request,
X-Up-Validate
contains a space-separated list of all validating field names:
X-Up-Validate: email password
X-Up-Target: fieldset:has(#password)
When up.validate()
is called with a non-field element, Unpoly might not know
which element triggered the validation. In that case the header value will be :unknown
:
X-Up-Validate: :unknown
X-Up-Target: .preview
Validating a long form may cause the X-Up-Validate
header to become excessively long.
This may cause web infrastructure from rejecting the request with an 413 Entity Too Large
error.
To prevent this, the header value is set to :unknown
if its length exceeds up.protocol.config.maxHeaderSize
.