Vue dotnet validator

A vuejs validator for .NET forms.

Build status


Summary

This package makes it possible to use .NET model validation using vue.js instead of the default jQuery validator way that microsoft dictates.
The idea is that you use this on your server rendered HTML forms which include the data-attributes that are generated by C#'s razor template engine.

Requirements

This package (from version 0.3.0 and up) requires vue 2.x.

Installation

npm install vue-dotnet-validator

Usage

Using this library requires changes on two places in your application, JavaScript and your razor cshtml templates.

$3

This registers the vue components so that vue.js knows what to activate.
Base usage:
``JavaScript
import dotnetValidator from './dotnet-validator/dotnet-validator';
Vue.component('validator-group', dotnetValidator.validatorGroup);
Vue.component('validator', dotnetValidator.validator());

`

$3

The following code should be added to your cshtml forms. This makes sure that the validator logic is activated and adds the required references to DOM-nodes.
`HTML

Register

`

#### Explanation of the cshtml changes:


This behaves as a container for the entire form, so we can maintain the state of the entire form and the validation status of the input fields in it.

v-on:submit="validate"

This adds an event listener to the

tag to make sure we prevent the default form submit event when fields are invalid.



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.

Creating custom validators

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

$3

`JavaScript

class MyCustomValidator extends vueDotnetValidator.BaseValidator {
isValid(value) {
return !value || value == 'Hello';
}
}
let validators = {
Mycustomvalidator: MyCustomValidator
};

Vue.component('validator', dotnetValidator.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`.