$v

A form validation helper. Attach rules to a field with h-rules, and read the result in the same shape as vuelidate.

When you leave an input, that field's error shows. When you press Send, every field is checked at once. You do not declare a rules object in the shape of the model first. A field's rules exist only while the field is on the page.

Writing rules

Short form

Write rule names separated by spaces. Parameters go after :, and several are separated by commas. Only the parameter of sameAs is a value in the scope.

As an expression

Write a { name: rule } object. Take the built-in rules from $rules, and put in your own functions too. A function receives the value and passes when it returns true. If it returns a string, that string is the message.

Field names

The expression of h-model becomes the name. form.email is read as $v.form.email. To give it another name, write h-rules:name. Without h-model, the name attribute is used.

Reading the result

A field

Name	What it is
`$invalid`	The field failed a rule. It is true even when the field has not been touched
`$dirty`	The user touched the field
`$error`	The field was touched and failed a rule. Read it to show an error on the page
`$errors`	The list of errors once the field is touched. Each one is `{ $validator, $message, $params, $property }`
`$silentErrors`	The rules that fail right now, touched or not
`$model`	The value of the field
`$touch()` · `$reset()`	Mark as touched · undo it

The whole form

$v itself has the same names. It gathers every field in that scope. Each h-scope has its own $v.

Name	What it is
`$v.$invalid`	At least one field failed a rule
`$v.$dirty` · `$v.$anyDirty`	Every field was touched · at least one was touched
`$v.$error` · `$v.$errors`	The errors of touched fields
`$v.$validate()`	Touches every field and returns `true` if nothing failed
`$v.$touch()` · `$v.$reset()`	Applied to every field

When errors show

A field becomes touched when you leave the input (blur, change). To show errors as you type, write h-rules.input. To show them from the start, read $silentErrors.

When h-if removes a field, its rules leave $v too. A field that is not shown does not block the form.

Built-in rules

Rule	Values that pass
`required`	Not empty. An empty string, an empty array, and `false` fail
`email`	Shaped like an email address
`numeric` · `integer`	A number · an integer
`minLength:n` · `maxLength:n`	The number of characters (for an array, the number of items)
`minValue:n` · `maxValue:n` · `between:a,b`	The size of the number
`pattern`	A regular expression. Write it as an expression: `$rules.pattern(/^0\d+$/)`
`sameAs:name`	Equal to another value in the scope

Only required catches an empty value. The other rules check only when there is a value.

Adding messages and rules

The default messages are in English. Use createValidate to change messages and add rules. An added rule works in both the short form and $rules.

How it differs from vuelidate

Rules are attached to the field. vuelidate declares a rules object in the shape of the model first. Here you do not declare a model, so the rules are written on the input element too.
$validate() returns the value right away. It is not a promise. There are no async rules.
Rule names are not registered on the scope. A name such as email clashes with a value of the model. In an expression, take it from $rules.email.

Adding it

With a plain script tag, load extensions/validate.iife.js. To change the messages, call HyperScope.plugin(HyperScopeValidate.createValidate({ messages })) once more. The one added later wins.