Validation in the browser

The rules a form's fields carry are checked on the server, after the post. With client on the {form} the browser checks them too, as the visitor types and before the form leaves - with the same rules and the same messages, so the two never disagree. The server still checks every post: the browser's check only saves a round trip.

<?php

  // The server checks every post against the same rules - the browser's check only saves
  // the visitor a round trip.

  if ( padPosted ( 'signup' ) ) {

    padFlash ( 'Welcome aboard.' );

    padRedirect ();

  }

?>

{form 'signup', client, error}
  {input 'name', label='Name', rules='required|max:40'}
  {input 'email', type='email', label='E-mail', rules='required|email'}
  {input 'age', label='Age', rules='integer|min:18'}
  <button>Sign up</button>
{/form}

• The form gets its rules in a data-pad-rules attribute, and the first such form of the page brings a small script along. A field is checked when it is left, again while it is typed in once it showed a message, and every field when the form is sent - a form that fails is not sent, and the first field with a message gets the focus.
• The messages stand where {input} puts the server's - a <span class="error"> after the field, tied to it with aria-invalid and aria-describedby - in the words of the field's label; the form's error= shows above the fields.
• A form with client needs a name and fields with rules=. A regex: rule JavaScript cannot read as PCRE does is left to the server.

Forms a component draws

A React, Vue or Alpine form is no {form} of the template. Keep the rules in the page's PHP instead - one list for both sides: padValidate ( $rules ) checks the post, and padValidateClient ( $rules ) exports the same list for the browser, every rule with the message padValidate would give:

<?php

  // One list of rules for both sides: padValidate checks the post with it, and the
  // component that draws the form gets it as padValidateClient exports it.

  $rules = [ 'email' => 'required|email', 'qty' => 'integer|min:1|max:10' ];

  $client = json_encode ( padValidateClient ( $rules ), JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES );

?>

{$client}

{
    "email": {
        "label": "Email",
        "number": false,
        "list": false,
        "single": ":label must be a single value",
        "rules": [
            [
                "required",
                "",
                ":label is required",
                ""
            ],
            [
                "email",
                "",
                ":label must be a valid e-mail address",
                ""
            ]
        ]
    },
    "qty": {
        "label": "Qty",
        "number": true,
        "list": false,
        "single": ":label must be a single value",
        "rules": [
            [
                "integer",
                "",
                ":label must be a whole number",
                ""
            ],
            [
                "min",
                "1",
                ":label must be at least :n",
                "1"
            ],
            [
                "max",
                "10",
                ":label must be at most :n",
                "10"
            ]
        ]
    }
}

{validator} in the template brings the checker without a form, and the component asks it:

<div x-data="{ rules: {^rules}, form: {}, errors: {} }">
  <input x-model="form.email" @blur="errors = padValidate.check(rules, form)">
  <span class="error" x-text="errors.email"></span>
</div>
{validator}

padValidate.check ( rules, values ) answers the message of every field that broke a rule; padValidate.field ( rules.email, value, values ) one field's, empty when it holds. A field named tags[] takes a list.