Installing and using Vee-Validate in ASP.NET MVC
In the previous session we learned about integrating vuejs in mvc application if you have not installed vuejs yet i highly recommend you look at the previous session of this tutorial. Before moving on installing vee-validate let us first learn what vee-validate actually is? Many times we require the input from the user to have a certain validation like maybe name is required, age must be greater than 18 and so on. Hence, it is necessary to warn the users about these things in the client side itself . Alternatively, what we can do is we can collect the data from the user, send it to the server, and then check whether the validation criteria meets or not, after that return validation error message if validation fails. so, this solution require lots of steps and also has bad user experience. what if we warn the user while filling up the form itself regarding the validation rules. this could save lots of time and also good user experience. this is called client side validation and vee-validate is the library for providing client side validation in vue.
According to official source VeeValidate is a validation library for Vue.js. It has plenty of validation rules out of the box and support for custom ones as well. It is template based so it is familiar with the HTML5 validation API. You can validate HTML5 inputs as well as custom Vue components.It is also build with localization in mind, According to official site it has about 44 languages supported and maintained by the wonderful community members.
Some of the features of VeeValidation are:
1) Template based validation.
2) Many validation rules are provided out of the box.
3) First class Localization Support.
4) Validate HTML5 inputs and custom Vue components.
5) Custom Rules and error messages.
Now we will install VeeValidate. VeeValidate can be installed through npm or CDN. But in this tutorial we will be installing from npm. For that i assume you have node server installed and have Vue and webpack installed. If not please install those first. I highly recommend you to have a look at the previous session of this tutorial. Before any delay let us now install VeeValidate. So, open cmd from the root project folder and enter the following command.
Now for using veevalidate import VeeValidate into the index.js file created in the previous session.
That's it we have successfully installed VeeValidate into our project. Now we will dive into the demo of VeeValidate. For that we create a simple form with the following code:
Now if we run the application we can see the output as shown below.
now as we click the submit button the form will not be submitted and the following output will be displayed.
In this way client side validation can be done with the help of VeeValidate. Note that there was three properties in input field in this example v-validate, data-vv-as and v-model. v-model means that the input field is bind to the 'name' in the data field. similarly data-vv-as is the text that will be displayed in the error message. In out case data-vv-as="Person Name" , So on validating the field " The Person Name field is required" is shown. If we do not write data-vv-as field than the value of name field will be shown in error message. i.e "The PersonName field is required". Note that we do not have blank space between Person and Name this time.
Similarly validate="'required'" is the validation rule provided by VeeValidate plugin which means that the field is required. VeeValidate comes with a bunch of validation rules out of the box and they are all localized and cover most validation rule. Some other validation rules are after, alpha, alpha_dash, alpha_num, alpha_spaces, before, between, confirmed, credit_card, date_between, date_format, decimal, digits, dimensions, email, ext, image, included, integer, ip, is, is_not, length, max, max_value, excluded, numeric, regex, required, size, url.
Beside these rules VeeValidate also provide ability to make custom validation as per our needs.