Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vuejs form

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>//vuejsexamples.net</title>
<!-- include vue -->
<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 example</div>
<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>Name</label>
<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 field</div>
</field-messages>

</validate>

<validate auto-label class="form-group required-field" :class="fieldClassName(formstate.email)">
<label>Email</label>
<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 field</div>
<div slot="email">Email is invalid</div>
</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 field</div>
<div slot="pattern">Phone number is invalid</div>
</field-messages>

</validate>

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

<select class="form-control" name="department" required v-model.lazy="model.department">
<option :value="null">Choose...</option>
<option value="1">AAA</option>
<option value="2">BBB</option>
<option value="3">CCC</option>
</select>

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

</validate>

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

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


© vuejsexamples.net - Privacy Policy - Cookie Policy