mrafea-sa/dryv-vee-validate

dryv-vee-validate

Dryv client-side validator for VueJS VeeValidate. Use this library to integrate the model validation library Dryv into web apps that use VueJS and VeeValidate..

Installation

npm install --save https://github.com/mhusseini/dryv-vee-validate.git

Usage

In the browser:

<script src="js/vue.js"></script>
<script src="js/vee-validate.js"></script>
<script src="js/dryv-vee.min.js"></script>

In NodeJS:

import Vue from "vue";
import VeeValidate from 'vee-validate';
import DryvVee from "dryv-vee";

Then (in browser and NodeJS):

Vue.use(VeeValidate);
DryvVee.init(VeeValidate);

var app = new Vue({
    el: "#app",
    mixins: [DryvVee.mixin],
    data: {}
});

... and the Razor view:

<form id="app" v-on:submit="dryvVee">
    <div>
        <label for="name">Name:</label>
        <!-- The dryv-v and v-validate attributes get generated by the server-side components of Dryv. -->
        <input type="text" name="name" value="wrong" dryv-v="v001" v-validate="'required|dryv:v001'" />
        <span>{{ errors.first('name') }}</span>
    </div>
    <button type="submit">Send</button>
</form>

Note that the HTML sample includes the TagHelper "asp-for" from ASP.NET Core. Dryv utilizes the standard validation mechanisms of ASP.NET Core to redner the client-side HTML attributes. If you want to use the client-side components only (i.e. write the HTML attributes yourself), refer the samples in this repository.