Validation is a very common task in web applications. Entered data should be validated before sending it to server. This post deals with form validation in vue js without any plugin. After reading this post we will be able to validate form with VueJs without using any plugin. Below are the steps to implement form validation in VueJs.
Step 1 : Add these two VueJs CDN.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript" src="https://unpkg.com/vue-simple-search-dropdown@latest/dist/vue-simple-search-dropdown.min.js"></script>
Step 2 : Create HTML Form.
<html lang="en">
<head>
<title>Form Validation With VueJs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-simple-search-dropdown@latest/dist/vue-simple-search-dropdown.min.js"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
<script type="text/javascript">
Vue.use(Dropdown);
</script>
</head>
<body>
<div class="container" id="app">
<div class="container">
<h4 class="text-success">Form Validation With VueJs</h4>
<div class="panel panel-primary">
<div class="panel-heading">Form Validation With VueJs</div>
<form class="form-horizontal" @submit="validateForm" method="POST">
<div class="panel-body">
<ul>
<li v-for="error in errors" style='color:red'>{{ error }}</li>
</ul>
<div class="form-group">
<label class="control-label col-sm-2">First name:</label>
<div class="col-sm-5">
<input class="form-control" type="text" name="first_name" v-model="first_name" >
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Last name:</label>
<div class="col-sm-5">
<input class="form-control" type="text" name="last_name" v-model="last_name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date Of Birth:</label>
<div class="col-sm-5">
<vuejs-datepicker name="birthday" v-model="birthday"></vuejs-datepicker>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Gender:</label>
<div class="col-sm-5">
<input type="radio" value = "Male" name="gender" v-model="gender">Male  Â
<input type="radio" value = "Female" name="gender" v-model="gender">Female  Â
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email:</label>
<div class="col-sm-5">
<input class="form-control" type="email" name="email" v-model="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Phone Number:</label>
<div class="col-sm-5">
<input class="form-control" type="text" name="phone" v-model="phone">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">City:</label>
<div class="col-sm-5">
<Dropdown name="city" :options="options" laceholder="Please select city"
v-model="city" >
</Dropdown>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Â Â </label>
<div class="col-sm-5">
<button class="btn btn-primary" name="submit" type="submit">Submit</button>
</div>
</div>
</div>
</div>
</form> Step 3 : Add VueJs Code.
<script>
const app = new Vue({
el: '#app',
components: {
vuejsDatepicker
},
data: {
errors:[],
first_name: '',
last_name: '',
birthday: '',
gender: '',
email: '',
phone: '',
city:'',
options: [
{ name: 'Delhi', id: '1' },
{ name: 'Bhopal', id: '2' },
{ name: 'Patna', id: '3' },
{ name: 'Ranchi', id: '4' },
{ name: 'Noida', id: '5' }
],
},
methods:{
validateForm:function(e) {
this.errors = [];
if(!this.first_name) {this.errors.push("First Name required.");}
if(!this.last_name) this.errors.push("Last Name required.");
if(!this.birthday) this.errors.push("Birthday required.");
if(!this.gender) this.errors.push("Gender required.");
if(!this.email) this.errors.push("Email required.");
if(!this.phone) this.errors.push("Phone Number required.");
if(this.errors.length==0) return true;
e.preventDefault();
}
}
})
</script>
</div>
</body>
</html>
