vue-form
Version:
Form validation for Vue.js
133 lines (115 loc) • 4.08 kB
HTML
<html>
<head>
<title>vue-form example</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<style>
.required-field>label::after {
content: '*';
color: red;
margin-left: 0.25rem;
}
</style>
</head>
<body>
<div id="app" class="container py-5">
<p>Example showing vue-form usage with Bootstrap styles, validation messages are shown on field touch or form submission</p>
<vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">
<validate auto-label :custom="{customValidator: customValidator}" class="form-group required-field" :class="fieldClassName(formstate.name)">
<label>Name</label>
<input type="text" name="name" class="form-control" required v-model="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>
<span v-if="formstate.name">{{formstate.name.$pending}}</span>
</validate>
<validate auto-label :custom="{customValidator2: customValidator2}" class="form-group required-field" :class="fieldClassName(formstate.name)">
<label>Email</label>
<input type="text" name="email" class="form-control" required v-model="model.email">
<field-messages name="email" show="$touched || $submitted" class="form-control-feedback">
<div>Success!</div>
<div slot="required">Name is a required field</div>
</field-messages>
<span v-if="formstate.email">{{formstate.email.$pending}}</span>
</validate>
<div class="py-2 text-center">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
</vue-form>
<pre>{{formstate}}</pre>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../dist/vue-form.js"></script>
<script>
console.log(Vue.version);
var options = {
inputClasses: {
valid: 'form-control-success',
invalid: 'form-control-danger'
}
}
var input = {
name: 'input',
bind: function(el) {
console.log('here');
}
};
var vm = new Vue({
el: '#app',
mixins: [new VueForm(options)],
components: {},
directives: {
input: input
},
data: {
formstate: {},
model: {
name: '',
email: '',
phone: '',
department: null,
comments: '',
notValidated: ''
}
},
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('$valid', this.formstate.$valid);
console.log('$pending', this.formstate.$pending);
},
customValidator (value) {
return new Promise((resolve, reject) => {
this.resolveStatus = 'resolving';
setTimeout(() => {
this.resolveStatus = 'resolved to true';
resolve(true);
}, 5000);
});
},
customValidator2 (value) {
return new Promise((resolve, reject) => {
this.resolveStatus = 'resolving';
setTimeout(() => {
this.resolveStatus = 'resolved to true';
resolve(true);
}, 2000);
});
}
}
});
</script>
</body>
</html>