This adds a validator instance to the form. The @Model.LastName is the property of your model.

ref="message"

This adds a reference to the validation-message element. This makes sure the validation message is displayed at the correct position in the DOM.

ref="field"

This adds a reference to the input field, so the instance knows what element to watch.

v-model="val"

This adds the model binding in the instance.

validation-style="" (optional, default is after-blur), validation-styles:

- after-blur (default): After first blur validation will be reactive.
- after-change: After first change validation will be reactive, blurring an autofocus field with no input will not trigger this.
- after-submit: After first submit validation will be reactive.

prioritize-extra-error-message

This prioritizes the (optional) extra error messages over the normal validation messages.

Built-in validators

There are a couple of built-in validators you can use.

$3

To validate if a value is not null, undefined or empty-string.

$3

To validate a value (for example a checkbox) is set to true.

$3

To validate a value is equal to the value of another input-field based on it's name attribute.

$3

To validate a value complies to a regex.

$3

To validate a numeric value is in a range between.

$3

To validate a string value length is in a range between.

$3

To validate a string value has a minimum length.

$3

To validate a string is not longer than a maximum length.

Creating custom validators

It is possible to create your own validators, below is an example of a very simple custom validator.

$3

`JavaScript
import { validator, BaseValidator } from 'vue-dotnet-validator';

class MyCustomValidator extends BaseValidator {
isValid(value) {
return !value || value == 'Hello';
}
}

const validators = {
MyCustomValidator
};

Vue.component('validator', validator(validators));
`

$3

To use this custom validator in your own form, make sure your custom .NET data annotation outputs a data-val-mycustom="MESSAGE" attribute on your DOM node.

Custom validators with additional parameters

You can extend the features of your custom validators using additional data-attributes on your tag. This is a feature supported in .NET.
For an example on the usage of this feature, see regexvalidator.js.

Publish a new version

Make sure you have publish rights at the Q42 organisation on NPM.

`shell
npm version [major|minor|patch]
npm publish
``