admin管理员组文章数量:1335871
I have a very basic VueJS form, wherein I am validating the input.
The form validation happens on initial call to the validate form method, and the appropriate validation messages are displayed on each input.
What I am puzzled about is that on the vee-validate example for the forms, clicking on the submit button invokes the validation, and then displays the error message for each form input. Once you enter a value on the input (say on the name field), you can clearly see that the validation error and message for that field is removed.
I am providing a sample JSBin illustrating the issue I am having.
On the output panel, click on the Validate Form button, and you can see that the validation is working. But once you enter some text on the input field (i.e. First Name), the validation does not work anymore, unless you explicitly click again on the Validate Form button. This does not seem to be the same behavior on the Vee-Validate form.
Am I overlooking or missing something? Appreciate any input on what may be causing the issue as I am quite new with VueJS.
Thanks.
Codes as from JSBin:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href=".3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container">
<form class="form-horizontal" @submit.prevent="validateBeforeSubmit">
<div class="form-group">
<label class="control-label col-md-2 col-sm-4" for="firstName">First Name:</label>
<div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('FirstName') }">
<input name="FirstName" v-model="firstName" v-validate:firstName.initial="'required|alpha|min:3'" class="form-control" type="text" id="firstName" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('FirstName') }" >
<span v-show="errors.has('FirstName')" class="help-block error text-danger">{{ errors.first('FirstName') }}</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-sm-4" for="lastName">Last Name:</label>
<div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('LastName') }">
<input name="LastName" v-model="lastName" v-validate:lastName.initial="'required|alpha|min:3'" class="form-control" type="text" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('lastName') }" >
<span v-show="errors.has('LastName')" class="help-block error text-danger">{{ errors.first('LastName') }}</span>
</div>
</div>
</form>
<a class="btn btn-success btn-md " v-on:click="validateBeforeSubmit">Validate Form</a>
<hr />
<pre>{{ errors }}</pre>
<pre>{{ fields }}</pre>
</div>
<script src=".0.3/vue.js"></script>
<script src=".0.0-beta.21/vee-validate.min.js"></script>
<script src=".min.js"></script>
<script src=".3.6/js/bootstrap.min.js"></script>
</body>
</html>
JS
Vue.use(VeeValidate);
var app = new Vue({
el: '#app',
data: {
firstName: null,
lastName: null
},
methods:{
validateBeforeSubmit: function(){
function onOk(){
alert('Form is OK');
}
function notOk(){
alert('Form Not OK');
}
this.$validator.validateAll().then(onOk, notOk);
}
}
});
I have a very basic VueJS form, wherein I am validating the input.
The form validation happens on initial call to the validate form method, and the appropriate validation messages are displayed on each input.
What I am puzzled about is that on the vee-validate example for the forms, clicking on the submit button invokes the validation, and then displays the error message for each form input. Once you enter a value on the input (say on the name field), you can clearly see that the validation error and message for that field is removed.
I am providing a sample JSBin illustrating the issue I am having.
On the output panel, click on the Validate Form button, and you can see that the validation is working. But once you enter some text on the input field (i.e. First Name), the validation does not work anymore, unless you explicitly click again on the Validate Form button. This does not seem to be the same behavior on the Vee-Validate form.
Am I overlooking or missing something? Appreciate any input on what may be causing the issue as I am quite new with VueJS.
Thanks.
Codes as from JSBin:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>JS Bin</title>
</head>
<body>
<div id="app" class="container">
<form class="form-horizontal" @submit.prevent="validateBeforeSubmit">
<div class="form-group">
<label class="control-label col-md-2 col-sm-4" for="firstName">First Name:</label>
<div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('FirstName') }">
<input name="FirstName" v-model="firstName" v-validate:firstName.initial="'required|alpha|min:3'" class="form-control" type="text" id="firstName" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('FirstName') }" >
<span v-show="errors.has('FirstName')" class="help-block error text-danger">{{ errors.first('FirstName') }}</span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2 col-sm-4" for="lastName">Last Name:</label>
<div class="col-md-5 col-sm-8" v-bind:class="{ 'has-error' : errors.has('LastName') }">
<input name="LastName" v-model="lastName" v-validate:lastName.initial="'required|alpha|min:3'" class="form-control" type="text" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('lastName') }" >
<span v-show="errors.has('LastName')" class="help-block error text-danger">{{ errors.first('LastName') }}</span>
</div>
</div>
</form>
<a class="btn btn-success btn-md " v-on:click="validateBeforeSubmit">Validate Form</a>
<hr />
<pre>{{ errors }}</pre>
<pre>{{ fields }}</pre>
</div>
<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://cdn.jsdelivr/vee-validate/2.0.0-beta.21/vee-validate.min.js"></script>
<script src="https://code.jquery./jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
JS
Vue.use(VeeValidate);
var app = new Vue({
el: '#app',
data: {
firstName: null,
lastName: null
},
methods:{
validateBeforeSubmit: function(){
function onOk(){
alert('Form is OK');
}
function notOk(){
alert('Form Not OK');
}
this.$validator.validateAll().then(onOk, notOk);
}
}
});
1 Answer
Reset to default 4As it is in the documentation, you have to make following changes:
- Only put
v-validate="'required|alpha|min:3'" - You can add
data-vv-delay="100"to get errors after 100ms or whatever time you deem fine.
see HTML below :
<input name="FirstName" v-model="firstName" data-vv-delay="100" v-validate="'required|alpha|min:3'" class="form-control" type="text" id="firstName" placeholder="" v-bind:class="{ 'input': true, 'has-error': errors.has('FirstName') }" >
See working bin.
本文标签： javascriptVueJS VeeValidate Validation Not Happening On InputStack Overflow
版权声明：本文标题：javascript - VueJS Vee-Validate Validation Not Happening On Input - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742397949a2467303.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论