Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs form

Related course:
Fullstack Vue: The Complete Guide to Vue.js

Using VueForm you can make an interactive form with form validation. This works on all kinds of fields including text, numeric and email fields.

Do note that it is client-side validation, not server-side. You want to have validation on both sides for security reasons.

Vuejs form example

In this example we define the form ourself. It’s also possible to generate your form automatically using the javascript object.

In this tutorial we’ll create this form.

vuejs form

Create a vue instance with a VueForm. In this instance define the model : all fields of your form. You can also add methods in there for submit button.


Vue.use(VueForm, {
inputClasses: {
valid: 'form-control-success',
invalid: 'form-control-danger'
}
});

new Vue({
el: '#app',
data: {
formstate: {},
model: {
name: '',
email: '',
phone: '',
department: null,
}
},
methods: {
fieldClassName: function (field) {
if(!field) {
return '';
}
if((field.$touched || field.$submitted) && field.$valid) {
return 'has-success';
}
if((field.$touched || field.$submitted) && field.$invalid) {
return 'has-danger';
}
},
onSubmit: function() {
console.log(this.formstate.$valid);
}
}
});

Then create your template. This file is a little bit long, but the essence is within the app div.The other parts are simply the inclusion of Vue and the app.

If you add a form to your existing app, remember to include the javascript file vue-form.min.js.


<html lang="en">
<head>
<meta charset="utf-8">
<title>//vuejsexamples.nettitle>

<script src="//unpkg.com/vue">script>
<script type="text/javascript" src="//unpkg.com/[email protected]">script>
<link rel="stylesheet" type="text/css" href="//unpkg.com/[email protected]/dist/vfg.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="//rawgit.com/fergaldoyle/vue-form/master/dist/vue-form.min.js">script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
head>
<body>

<div id="app" class="container py-5">
<div class="panel panel-default">
<div class="panel-heading">Vue.js form examplediv>
<div class="panel-body">

<vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">

<validate auto-label class="form-group required-field" :class="fieldClassName(formstate.name)">
<label>Namelabel>
<input type="text" name="name" class="form-control" required v-model.lazy="model.name">

<field-messages name="name" show="$touched || $submitted" class="form-control-feedback">
<div>Success!div>
<div slot="required">Name is a required fielddiv>
field-messages>

validate>

<validate auto-label class="form-group required-field" :class="fieldClassName(formstate.email)">
<label>Emaillabel>
<input type="email" name="email" class="form-control" required v-model.lazy="model.email">

<field-messages auto-label name="email" show="$touched || $submitted" class="form-control-feedback">
<div>Success!div>
<div slot="required">Email is a required fielddiv>
<div slot="email">Email is invaliddiv>
field-messages>

validate>

<validate auto-label class="form-group required-field" :class="fieldClassName(formstate.phone)">
<label>Phone number (format: xxxx-xxx-xxxx)label>
<input type="tel" name="phone" class="form-control" required pattern="^\d{4}-\d{3}-\d{4}$" v-model.lazy="model.phone">

<field-messages name="phone" show="$touched || $submitted" class="form-control-feedback">
<div>Success!div>
<div slot="required">Phone number is a required fielddiv>
<div slot="pattern">Phone number is invaliddiv>
field-messages>

validate>

<validate auto-label class="form-group required-field" :class="fieldClassName(formstate.department)">
<label>Departmentlabel>

<select class="form-control" name="department" required v-model.lazy="model.department">
<option :value="null">Choose...option>
<option value="1">AAAoption>
<option value="2">BBBoption>
<option value="3">CCCoption>
select>

<field-messages name="department" show="$touched || $dirty || $submitted" class="form-control-feedback">
<div>Success!div>
<div slot="required">Department is a required fielddiv>
field-messages>

validate>

<div class="py-2 text-center">
<button class="btn btn-primary" type="submit">Submitbutton>
div>
vue-form>

div>
div>
div>
div>
body>
<script src="app.js">script>
html>


© vuejsexamples.net - Privacy Policy - Cookie Policy