In my vuejs 2.5 form I show colored errors span in case of error
<label class="col-xs-12 col-sm-4 control-label">Name<span class="required"> * </span></label>
<div class="col-xs-12 col-sm-8">
<input type="text" v-model="newUserTaskType.name" v-bind:class="{'form-control':true, 'text-warning': errorsList.name}"
placeholder="Enter unique name of new user's task type" >
<small v-if="errorsList.name" class="text-warning">{{ errorsList.name[0] }}</small>
</div>
I want to clear this colored span in case key pressed on the input with error. When I used Jquery I wrote a function like
setErrorKeypress: function () {
$(".text-warning").bind('keypress', function () {
$(this).removeClass("text-warning");
...
But it is not triggered now, if with erorr span has text-warning class.
I found a key handler like:
<input v-on:keydown="keyhandler" />
But I dislike a way of setting an event in any input definition.
Could you give a ref/hint in which way this could be implemented ?
Thanks!
Hello, let me ask 2 more questions on the theme: I use VeeValidate for form validation and it worked ok. But I decided to remake my editor using slot, like in resources/assets/js/components/lib/FormHelper.vue:
<template>
<section>
<div class="panel panel-default">
<div id="form-header">
<h3>Fill the form:FormHelper.vue</h3>
<editor-header :show_loading_image="!is_page_loaded || is_page_updating" :header_title=title :message=message></editor-header>
</div>
<form @submit.prevent="validateBeforeSubmit" id="form_document_category_edit" class="form-horizontal">
<div id="form-editable-fields">
<slot name="form-editable-fields"></slot>
</div>
<div id="form-button-controls">
<slot name="form-button-controls">
<div class="row pull-right">
<editor-buttons submit_label="Update" cancel_label="Cancel" :is_page_updating="is_page_updating"></editor-buttons>
</div>
</slot>
</div>
</form>
</div>
</section>
</template>
<script>
import appMixin from '../../appMixin';
export default{
created() {
},
mixins : [appMixin],
mounted() {
}, // mounted() {
methods: {
validateBeforeSubmit() {
alert( "validateBeforeSubmit::"+var_dump(-1) )
this.$validator.validateAll().then((result) => {
if (result) {
alert( "Validated::"+(-9) )
this.updateDocumentCategory()
return;
}
alert( "False::"+(0) )
})
}, // validateBeforeSubmit() {
}, // methods: {
data(){
return{
title : 'Default Title',
message : '',
is_page_loaded:false,
is_page_updating:false,
}
},
}
</script>
and using this helper in resources/assets/js/components/user_task_types/UserTaskTypesCreate.vue :
<template>
<section>
<form-helper title="Password Reset" >
<div slot="form-editable-fields">
<div class="row">
<div class="col-xs-12 form-group">
<label class="col-xs-12 col-sm-4 control-label">Name<span class="required"> * </span></label>
<div class="col-xs-12 col-sm-8">
<input name="name" v-validate="'required'" type="text" v-model="newUserTaskType.name"
:class="{ 'form-control':true, 'input': true, 'text-danger': vueErrorsList.has('name') }"
placeholder="Enter unique name of new user's task type">
<span v-show="vueErrorsList.has('name')" class="text-danger">{{ vueErrorsList.first('name') }}</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 form-group">
<label class="col-xs-12 col-sm-4 control-label">Description<span class="required"> * </span></label>
<div class="col-xs-12 col-sm-8">
<textarea name="description" v-validate="'required'" v-model="newUserTaskType.description" rows="10"
:class="{ 'form-control':true, 'input': true, 'text-danger': vueErrorsList.has('description') }"
placeholder="Enter description of new user's task type"></textarea>
<span v-show="vueErrorsList.has('description')" class="text-danger">{{ vueErrorsList.first('description') }}</span>
</div>
</div>
</div>
</div> <!-- <div slot="form-editable-fields -->
</form-helper>
</section>
</template>
<script>
import appMixin from '../../appMixin';
import formHelper from '../lib/FormHelper.vue'; // resources/assets/js/components/lib/FormHelper.vue
export default{
components: {
'form-helper': formHelper,
},
created() {
},
mixins : [appMixin],
mounted() {
this.setUserTaskTypeDefaultValue();
this.loadUserTaskTypeDictionaries()
}, // mounted() {
data(){
return{
header_title : 'Create new user\'s task type',
newUserTaskType:{
name:'',
description:'',
},
errorsList:[],
message:'',
}
},
methods:{
createUserTaskType() {
this.is_page_updating= true
axios.post(window.API_VERSION_LINK + '/user_task_types', this.newUserTaskType).then((response) => {
this.errorsList= [];
this.is_page_updating= false
this.newUserTaskType = []
this.$router.push({path: '/'});
}).catch((error) => {
this.$setLaravelValidationErrorsFromResponse(error.response.data);
this.is_page_updating= false
this.showRunTimeError(error, this);
});
}, // createUserTaskType() {
setUserTaskTypeDefaultValue() {
this.newUserTaskType.name= '';
this.newUserTaskType.description= '';
},
loadUserTaskTypeDictionaries() {
this.is_page_loaded = true
}, // loadDocumentCategoryDictionaries() {
}
}
</script>
1) When I click on a field with required option, I got error message ok, bluring the input I got error message as I need, as inputs are in UserTaskTypesCreate.vue file.
But when I click on submit function(calling validateBeforeSubmit) validation does not work properly. Looks like validation object in the helper is different from validation objects in the UserTaskTypesCreate.vue form. If there is a way some how to use the same validation object in both the form and the helper?
2) The helper has variable with default value
title : 'Default Title',
Calling the for I set the title property as :
<form-helper title="Password Reset" >
But it does not work and I see default value. Which is the right way?
Thanks!
