vue-form
Version:
Form validation for Vue.js
189 lines (157 loc) • 6.05 kB
HTML
<html>
<head>
<title>vue-form example</title>
<meta charset="utf-8" />
<style>
label {
display: block;
margin-bottom: 1.5em;
}
label > span {
display: inline-block;
width: 8em;
vertical-align: top;
}
</style>
</head>
<body>
<div id="app">
<vue-form :state="formstate" v-model="formstate" @submit.prevent="onSubmit">
<button type="button" @click="isReq = !isReq">Toggle</button>
<button type="button" @click="changeStuff">Change stuff</button>
isReq {{isReq}}
{{formstate.$dirty}}
{{formstate.$error}}
<!--
<label>
<span>Name *</span>
<validate :required="isReq" min-length="10" max-length="40" pattern="/sdfsdffd/">
<input v-model="model.name" name="name" />
</validate>
</label>
<label>
<span>Email *</span>
<validate required>
<input v-model="model.email" name="email" type="email" />
</validate>
</label>
<label>
<span>component</span>
<validate required>
<test v-model="model.name" name="foobar"></test>
</validate>
</label>
====================
<label>
<span>Name</span>
<input v-form :minlength="3" v-model="model.name" name="name" :required="isReq" pattern="foo" />
<form-error :field="formstate.name" error="required">Name is a required field 2</form-error>
<form-error :field="formstate.name" error="minlength">Min length is not satisfied</form-error>
<form-errors :field="formstate.name">
<div slot="pattern">Pattern don't match</div>
<div slot="required">Field is required</div>
<div slot="minlength">minlength not satisfied</div>
</form-errors>
</label>
-->
<validate tag="label">
<span>foo</span>
<input name="foo" type="text" v-model="model.foo" required />
</validate>
<!--
<form-errors field="foo">
<div slot="required">Field is required</div>
</form-errors>
<form-error field="foo" error="required">Name is a required field 2</form-error>
-->
<!--
<label>
<span>foo</span>
<input name="foo" type="text" v-model="model.foo" required="false" />
</label>
<label>
<span>Email</span>
<input v-form v-model="model.email" name="email" type="email" :required="isReq" />
</label>
<label>
<span>component</span>
<test v-validate v-model="model.testcomp" :required="isReq" name="foobar"></test>
</label>
<label>
<span>Request call back</span>
<validate :model="model.contactRequired"><input v-model="model.contactRequired" type="checkbox" name="contactRequired" /></validate>
</label>
<label>
<span>Contact details <span v-if="model.contactRequired">*</span></span>
<textarea v-model="model.contact" :required="model.contactRequired" name="comments"></textarea>
</label>
<div v-if="model.contactRequired">
<p>Extra contact fields</p>
<label>
<span>3 digit code *</span>
<input v-model="model.code" name="code" type="text" pattern="[A-Za-z]{3}" required />
</label>
</div>
-->
<button type="submit">Submit</button>
</vue-form>
<pre>{{formstate}}</pre>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../dist/vue-form.js"></script>
<script>
Vue.use(vueForm);
var vm = new Vue({
el: '#app',
components: {
test: {
props: [
// 'name',
'value'
],
data () {
return {
internalValue: ''
}
},
template: '<span>TEST<input @input="update" v-model="internalValue" /></span>',
created () {
this.$watch('value', () => {
this.internalValue = this.value;
}, {
immediate: true
});
},
methods: {
update () {
this.$emit('input', this.internalValue);
}
}
}
},
data: {
isReq: true,
formstate: {},
model: {
foo: '',
email: '',
name: 'name',
contact: '',
testcomp: 'comp',
contactRequired: false
}
},
methods: {
changeStuff: function () {
this.isReq = !this.isReq;
this.model.name = this.model.name + 'foo';
},
onSubmit: function () {
console.log(this.formstate.$valid);
}
}
});
</script>
</body>
</html>