Vue.use(VeeValidate);
var app = new Vue({
el: "#app",
data: {
textField: "",
numberField: "",
emailField: ""
},
methods: {
submitForm: function(e) {
e.preventDefault();
//post my data to my cool API without any validation!
}
}
});
<body>
<section class="hero is-fullheight is-dark is-bold">
<div class="hero-body">
<div class="container">
<div class="columns is-vcentered">
<div class="column is-4 is-offset-4">
<div id="app" class="box">
<label class="label">Some text input</label>
<p class="control">
<input class="input" type="text" name="textField">
</p>
<label class="label">Some number input</label>
<p class="control">
<input class="input" type="number" name="numberField" v-validate="'required|between:18,99|max:2'">
<span v-show="errors.has('numberField')" class="redText">{{errors.first('numberField')}}</span>
</p>
<label class="label">An email input</label>
<p class="control">
<input class="input" type="email" name="emailField">
</p>
<hr>
<p class="control">
<button class="button is-primary" @click="submitForm">Submit my cool data!</button>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
.redText {
color: red;
}
External resources loaded into this fiddle: