{validator}
The browser's checker of the validation rules as one inline script, for a form a component draws.
Syntax
{validator}Description
{validator} writes pad/lib/validate.js into the page as one inline script: the browser's half of padValidate, with the same rules (required, email, url, numeric, integer, min, max, in, regex, same, accepted, date) and the same messages. It is written once a page - a second {validator}, or one after a {form ..., client} that brought it already, writes nothing.
It is for forms the template does not write as a {form} - a form a React, Vue or Alpine component draws, or a plain HTML form. Keep the rules in the page's PHP: padValidate ( $rules ) checks the post, and padValidateClient ( $rules ) exports the same list for the browser, each rule with the message padValidate would give.
The script defines padValidate.check ( rules, values ) (the message of every field that broke a rule), padValidate.field ( spec, value, values ) (one field's, empty when it holds) and padValidate.form ( form ). Every form with a data-pad-rules attribute is checked by itself: when it is sent, and a field again when it is left. A regex: rule JavaScript cannot read as PCRE does passes in the browser and is left to the server, which checks every post anyway.
Under a Content-Security-Policy that names 'nonce' the script carries this request's {nonce}.
Examples
Rules from PHP, checked in the browser
The page exports its rules with padValidateClient; any form carrying them in data-pad-rules is checked by the script {validator} writes.
<form method="get" novalidate data-pad-rules="{^signupRules}">
<label for="v-email">E-mail</label> <input name="email" id="v-email">
<label for="v-age">Age</label> <input name="age" id="v-age" type="number">
<button>Check</button>
</form>
{validator}<?php
$signupRules = padValidateClient ( [
'email' => 'required|email',
'age' => 'required|integer|min:18' ] );
?>A component asks the checker
An Alpine form drawn in the browser checks with padValidate.check - the same rules and messages padValidate ( $rules ) gives the post.
{# signup.php: $rules = [ 'email' => 'required|email' ]; $check = padValidateClient ( $rules ); #}
<div x-data="{ rules: {^check}, form: {}, errors: {} }">
<input x-model="form.email" @blur="errors = padValidate.check(rules, form)">
<span class="error" x-text="errors.email"></span>
</div>
{validator}See also
- {form} A form that posts back to the page, carrying the session's CSRF token and its own name, its fields refilling when it came back.
- {input} A form field with its label that refills from what its form sent and shows the error validation found for it.
- {nonce} This request's Content-Security-Policy nonce, for a script or style the policy lets run.