I want to add a class (border 1px solid #ff0000) to an input element if there is an error. Like:
Error:
errors.has(name)
Input:
<input v-validate="validate" v-on:input="updateValue($event)" :type="type" :placeholder="placeholder"
:name="name" :value="value" :class="classname" :id="id">
How can i achieve that?
Bind your class with an errors.has condition
<input v-validate="validate" :name="name" :class="{'classname': errors.has(name)}">
Related
I want the result in this field, which is displayed as suggested, to be from descending to ascending.
<!-- city -->
<div class="col-md-6">
<label class="form-label fw-bold w-100">{{ $t('post code') }}
<v-select v-model="form.postCode" :disabled="!form.country" label="name" :filterable="false"
class="my-1"
:options="postCodes"
:class="{ 'is-invalid': form.errors.has('postCode') }"
#search="onSearch"
>
<template slot="no-options">
Please enter 2 or more characters
</template>
<template #search="{attributes, events}">
<input
class="vs__search"
:required="!form.postCode"
v-bind="attributes"
v-on="events"
>
</template>
</v-select>
</label>
<has-error :form="form" field="postCode" />
</div>
</div>
How can i ?
You can create computed property and array sort inside of that computed property and return the result from that property. You can also check this post for more information: array sort
More information about computed properties: https://v2.vuejs.org/v2/guide/computed.html
From the docs, I think I need to use configure to add custom classes to my validated fields, but I can't get it to work.
This is what I have so far...
import { extend, configure, localize } from 'vee-validate'
import { required, min, max } from 'vee-validate/dist/rules'
import en from 'vee-validate/dist/locale/en.json'
// Install rules
extend('required', required)
extend('min', min)
extend('max', max)
// Install classes
configure({
classes: {
valid: 'is-valid',
invalid: 'is-invalid'
}
})
// Install messages
localize({
en
})
And in my view....
<ValidationObserver ref="observer" v-slot="{ invalid }" tag="form" #submit.prevent="checkRef()">
<div class="form-group">
<label for="reference">Reference</label>
<ValidationProvider rules="required|max:20" name="reference" v-slot="{ errors }">
<input maxlength="20" name="reference" v-model="ref" id="reference" class="form-control"/>
<span class="warning">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<button #click="checkRef" class="btn btn-primary app-button">Check Reference</button>
</ValidationObserver>
When I click the button, I see the error message but I don't get the 'in-invalid' class applied to my field.
What am I doing wrong?
VeeValidate does not apply the classes automatically anymore, since v3 you now must bind it yourself. Like errors you can extract classes from the slot props and apply it to your input:
<ValidationProvider rules="required|max:20" name="reference" v-slot="{ errors, classes }">
<input maxlength="20" name="reference" v-model="ref" id="reference" class="form-control" :class="classes" />
<span class="warning">{{ errors[0] }}</span>
</ValidationProvider>
I am newbie in VueJs.
I want to create customize component with wrapper like this:
template: `<div class="wrapper">
<input name="name" />
</div>`,
when using component, I want to add v-model,
<my-component v-model="form.input" />
But in actually, the value of model is bind just to the wrapper not to the input. If I change the model
form:{ input: "edited" }
that value only bind to wrapper like:
<div class="wrapper" value="edited">
<input name="name" />
</div>
is there any suggestion for my problem.
I am using Vuejs-2.
At minimum, you would need to do something like this:
<div class="wrapper">
<input
:value="value"
#input="$emit('input', $event.target.value)"
/>
</div>
props: ['value']
Below is my code. Three fields are there in my form. Firstname, Middlename, Lastname. All these fields are set as required one. Only difference is that "Firstname & Lastname" contains input tag, but "Middlename" contains b-form-input tag. Actually my problem is, When I focus out(blur) these("Firstname & Lastname") fields it throws an required error but when I do the same for ("Middlename") field it doesn't Image1. I have to enter the value in that ("Middlename") field Image2 ,then I removed the value it's throwing error
Image3 i.e. required validation is only working "on change" of the "("Middlename") field. What is the reason for this?
<template>
<b-card>
<h4 slot="header" class="card-title">Employee</h4>
<b-row>
<b-col sm="3">
<b-form-group>
<label for="name">First Name </label>
<input type="text" id="" class="form-control" placeholder="Enter your name" v-validate="'required'" name="Firstname">
<span v-show="errors.has('Firstname')" class="is-danger">{{ errors.first('Firstname') }}</span>
</b-form-group>
</b-col>
<b-col sm="3">
<b-form-group>
<label for="name">Middle Name </label>
<b-form-input type="text" id="" class="form-control" placeholder="Enter your name" v-validate="'required'" name="Middlename"> </b-form-input>
<span v-show="errors.has('Middlename')" class="help is-danger">{{ errors.first('Middlename') }}</span>
</b-form-group>
</b-col>
<b-col sm="3">
<b-form-group>
<label for="name">Last Name </label>
<input type="text" id="" class="form-control" placeholder="Enter your middle name" v-validate="'required|Name'" name="Lastname">
<span v-show="errors.has('Lastname')" class="help is-danger">{{ errors.first('Lastname') }}</span>
</b-form-group>
</b-col>
</b-row>
<input type="submit" value="Submit" #click="validateForm">
</b-card>
</template>
<script>
import Vue from 'vue'
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
name: 'addEmpl',
created: function() {
this.$validator.extend('Name', {
getMessage: field => '* Enter valid ' + field + '',
validate: value => /^[a-zA-Z]*$/.test(value)
});
}
}
</script>
<style lang="scss" scoped>
.is-danger{
color: RED;
}
</style>
First of all, I am also new to Vue.js and Vee-validate so I stand corrected.
The difference between the 2 fields and the middlename field is that it is a component instead of native input field.
In essence, you need to make the component behaves like an input, i.e. emits the necessary events so Vee-validate can pick up on them ('input', 'change', 'blur' etc).
For e.g if your component is a div wrapping on input it would be something like this:
<template>
<div class="myClassForDiv">
<input
type="text"
class="myClass"
#blur="$emit('blur')"
#input="$emit('input', $event.target.value)"
>
</div>
</template>
<script>
export default {
name: "b-form-input"
}
</script>
The part relevant to the question is #blur="$emit('blur')". Without this line, VeeValidate has no way of getting notified of a blur event occurring hence does not validate (I don't know what other events VeeValidate listens to by default, but 'blur' works for me and 'focusout' does not. You can always use the data-vv-validate-on directive for special events specific to your components).
You may refer to the this article by the maintainer of VeeValidate library. Notice how he creates a component that plays nicely with VeeValidate by making the component emits all the right events.
https://medium.com/#logaretm/authoring-validatable-custom-vue-input-components-1583fcc68314
Let's start from this
<div class="form-group" :class="{'has-error':determineError('content')}">
<label>Content Label</label>
<div class="mandat">*</div>
<input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
</div>
The first thing I would like to obtain is to put this piece of code somehow inside a component, something like this:
Vue.component('form-group', {
...
template: `<div class="form-group" :class="{'has-error':determineError('content')}">
<label>Content Label</label>
<div class="mandat">*</div>
<input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
</div>`
});
As you can see I still have the input field right there. What I would like to do is pass any piece of code instead and the current component must inherit parent's context.
Something like
<form-group>
<template>
<input v-model="form.content" name="content" v-validate="'required|min:5|max:100'" class="form-control">
</template>
</form-group>
How can this be achieved? Notice that I still use parent's context. If using parent's context is not possible, then how can I achieve this in the simplest way?
You have to use slots, which are expanded in the component template with the contents passed by the parent.
In the form-group component:
<template>
<div class="form-group" :class="{'has-error':determineError('content')}">
<label>Content Label</label>
<div class="mandat">*</div>
<slot v-bind:form="form"></slot>
</div>
</template>
You can also add a fallback content inside the <slot> (a default input maybe). Note we are passing the context for the slot contents (see Scoped Slots).