Updated April 3, 2023
Introduction to Vue.js form validation
Form validation is used to validate the web forms in any frontend framework. By using form validation, we can validate our form fields entered by the user is correct. If the values in the field are not correct, this also allows us to display an error message that the user understates. Also, this form of validation is known as frontend validation or client-side validation. We most often use template-driven validation in our web form to validate data. In this topic, we are going to learn about Vue.js form validation.
Syntax
To use form validation, we need to write our all input fields inside the form tag (<form>); after that, only we can use its function to validate our data. Let’s see syntax and one practice example to understand it better see below;
<html>
<body>
<form>
<!-- all the input fields will go here-->
</form>
</body>
</html>Also, we need to use the script tag to create our Vue.js instance, which can be used with form. Below see the syntax to create the instance of Vue.js using a script tag.
<script>
<!-- Vue js instance will be crated here to use with form-->
</script>How does form validation work in Vue.js?
As of now, we know that we would require a Vue.js instance to work with form validation. We can achieve this by using the script tag where we need to mention the form name as id using ‘#’. Also, we need to map all the input fields inside this script tag by their name in order to apply any validation on them. We will see in detail how we can use this by seeing one syntax for each of these.
Let’s see step by step configuration to use form validation in Vue.js see below;
1. In our HTML file, we need to use the <form> tag before all the input filed; also, we will assign one name to each of the input files. We can do this by using one of the attributes available in Vue.js, i.e. v-model. In the below example, we are using form tag and v-model on the input type filed and assign them to name as ‘studentName’; we can also define more fields by following this syntax in order to use this filed.
Example:
<form>
<div class="form-control" >
<input type="text" id="studentName" name="studentName" v-model="studentName" />
</div>
</form>2. Now, we will create the Vue.js instance to access the fields inside the script tag. This tag will be present inside the <body> tag of the html file. For more understanding, let’s see one example:
<script>
const demoForm = new Vue({
ele: '#demo-form'
});
</script>In order to use the files here, we will use the data object see below.
<script>
const demoForm = new Vue({
ele: '#demo-form',
data: {
studentName: '',
param2: '',
param3: ''
}
});
</script>In the above syntax, we are creating data objects, and inside this object, we are accessing the fields by their name. Also, we gave give our form a name here as ‘demoForm’.
3. In Vue.js, we have the attribute of a rule that can apply the rule on fields. So we can use them in the fields. In order to use this, we use the ‘rules’ keyword. With the attribute, we can pass our pattern, regular expression, and so on. But his attribute is the part of validation-provider. We can also apply multiple rules at the same time on the same file by using the ‘|’ pipe operator to separate each rule.
Example:
rules ="max:10 | min:2 | required"4. In Vue.js, we have two more things as validation-provider and validation-observer. First, we bind our whole form with validation-observer, and all the fields will be bind inside the validation provider.
<validation-observer>
<form>
<validation-provider rules="your_rule_here">
</validation-provider>
</form>
</validation-observer>Points to remember while working with the form validation in Vue:
- We would require the Vue instance in order to access the fields of the HTML file.
- We also need to provide the name of a field that should be unique. This can be done by using the v-model in Vue form validation.
- We can also apply multiple validations in a single field. Finally, we can also display the error message.
- This form validation is used to validate the user data are also termed as client-side validation.
- Use <script> tag and <form> tag. These are the most common tags while working with the form on the frontend side.
Examples of Vue.js form validation
Given below are the examples of the Vue.js form validation:
Example #1
In this example, we are creating two files; one is an HTML file with all the validation on the filed using the Vue.js attribute available. The second file is the.JS file, which contains the Vue instance, and the handling events like On submit of the button and other logic to proceed.
HTML file:
<div id="demoapp">
<pre>{{$demo | json}}</pre>
<validator name="demo">
<form v-on:submit.prevent="submitForm" novalidate>
<input type="number" v-model="value" v-validate:value="{min:2}"/>
<span class="help-block" v-show="$demo.value.min"> Enter atleast two number</span>
<br/> <br/>
<button type="submit">Save Details</button>
</form>
</validator>
</div>.JS file:
new Vue({
el: "#demoapp",
data: {
value: ''
},
methods: {
submitForm: function() {
this.$validate(true);
if (this.demo.valid) {
console.log("validate true ..")
}
},
}
});Output:
Example #2
In this example, we are validating a student form by providing the age and name. Using different rules like min, max, and required.
HTML file:
<div id="demoapp">
<pre>{{$demo | json}}</pre>
<validator name="demo">
<form v-on:submit.prevent="submitForm" novalidate>
<label>Enter age :</label>
<input type="number" v-model="value" v-validate:value="{min:2}"/>
<span class="help-block" v-show="$demo.value.min"> Please enter valid age here.</span>
<br/>
<label>Enter name :</label>
<input type="text" v-model="name" v-validate:name="{min:1}"/>
<span class="help-block" v-show="$demo.name.min"> Please enter name here.</span>
<br/> <br/>
<button type="submit">Save Details</button>
</form>
</validator>
</div>JS file:
new Vue({
el: "#demoapp",
data: {
value: '',
name : ''
},
methods: {
submitForm: function() {
this.$validate(true);
if (this.demo.valid) {
console.log("validate true ..")
}
},
}
});Output:
Conclusion
By using the form validation, we can validate the user data at the front end. Vue.js provides us with many functions and attribute to validate our data. We use template-driven validation means at form level only. This client-side validation makes our data correct and prevents us from many later bugs or errors in the code.
Recommended Articles
This is a guide to Vue.js form validation. Here we discuss the introduction, syntax, and working of validation in Vue.js along with examples and code implementation. You may also have a look at the following articles to learn more –
