up.protocol X-Up-Validate

HTTP header

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.

Example

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)

Batched validations

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 no origin field is known

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

When too many fields are validated

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.