I am using Vue.js and I am new on it. I am currently working on validation. I had used vuelidate as my validation library. I had successfully done form validation, but trouble came when I had to check validation for check box.
How can I check validation for check box? Also, I had used bootstrapvue to display check box.
<b-col lg="6" md="6" sm="6">
<label>Bus Route</label>
<b-form-group>
<b-form-checkbox v-for="route in busRouteList"
v-model.trim="selectedRoute"
v-bind:value="route.value"
v-bind:unchecked-value="$v.selectedRoute.$touch()">
{{route.text}}</b-form-checkbox>
</b-form-group>
<div class="form-group__message" v-if="$v.selectedRoute.error && !$v.selectedRoute.required">
Field is required
</div>
</b-col>
validations: {
selectedRoute: {
required
},
}
As false is also valid value so, you should try to use sameAs
import { sameAs } from 'vuelidate/lib/validators'
terms: {
sameAs: sameAs( () => true )
}
You should bind #change methods:
<b-form-checkbox v-for="route in busRouteList"
v-model.trim="selectedRoute"
v-bind:value="route.value"
#change="$v.selectedRoute.$touch()">
and you might want to use custom function:
selectedRoute: {
checked (val) {
return val
}
},
This worked for me.
Basically, you need to make its value 'sameAs' a boolean 'true', which means the checkbox is checked.
So, i.e:
privacyCheck: {
sameAs: sameAs(true)
},
I hope this little example will help you to understand how to validate a checkbox.
You have to check when the input is changing. I recommend you to use #change.
In template
<div class="input">
<label for="country">Country</label>
<select id="country" v-model="country">
<option value="usa">USA</option>
<option value="india">India</option>
<option value="uk">UK</option>
<option value="germany">Germany</option>
</select>
</div>
<div class="input inline" :class="{invalid: $v.terms.$invalid}">
<input type="checkbox" id="terms" v-model="terms" #change="$v.terms.$touch()">
<label for="terms">Accept Terms of Use</label>
</div>
So the terms will be valid if selected country will be germany.
validations: {
terms: {
checked(val) {
return this.country === "germany" ? true : val;
}
}
}
of course country, terms are defined in data():
country:'',
terms: false
`
validations: {
terms: {
checked: (val) => {return val;}
}
}
`
With vuelidate-next (for both Vue 2 and Vue 3 support) it's so simple as using sameAs built-in validator with true as a direct parameter. For example, when using inside a setup method:
const termsAccepted = ref(false)
const v$ = useVuelidate(
{ termsAccepted: { sameAs: sameAs(true) } },
{ termsAccepted }
)
return { v$, termsAccepted }
Related
I have the following vue component where I am changing the class of the parent row based on whether or not an input is focused
<template>
<div class="form form--login">
<div class="form__row" :class="{entered: emailEntered}">
<label class="form__label" for="login-form-email">Email address</label>
<input type="text" class="form__control form__control--textbox" name="email-address" id="login-form-email" #focus="emailEntered = true" #blur="handleBlur($event, emailEntered)">
</div>
<div class="form__row" :class="{entered: passwordEntered}">
<label class="form__label" for="login-form-password">Password</label>
<input type="password" class="form__control form__control--textbox form__control--password" name="password" id="login-form-password" #focus="passwordEntered = true" #blur="handleBlur($event, passwordEntered)">
</div>
</div>
</template>
<script>
export default {
name: 'login-form',
data() {
return {
emailEntered: false,
passwordEntered: false,
}
},
methods: {
handleBlur(e, enteredBool) {
if (e.currentTarget.value.trim() === '') {
// this doesn't do anything - I can do an if else statement to change this.passwordEntered or this.emailEntered based on the name of the current target, but how do I change the value by passing it into the method?
enteredBool = false;
}
},
}
}
</script>
but it doesn't seem to change the variable that is passed into the method - how do I pass a data variable into the method and change it's value? Or should I be doing it in a different way? I don't really want to be doing an if else statement as I may have a form that has got a lot more inputs on and I think that would be really inefficient to maintain
I also thought that I could do something in the #bur as you can do #blur="passwordEntered = false", but I wasn't sure how to check if the field was empty or not
In order to change the variable, you need to refer it using this
handleBlur(e, enteredBool) {
if (e.currentTarget.value.trim() === '') {
this[enteredBool] = false; //Change added
}
},
and the way you pass it should be like
#blur="handleBlur($event, 'emailEntered')" //Added single quotes
and
#blur="handleBlur($event, 'passwordEntered')" //Added single quotes
I am trying to validate a form with vuelidate where it it shows the same amount of field depending on how many users i want to add, so if i want to add 3 users than 3 Name and age fields will show up.
However when i try to use #blur to validate the fields i always get an "undefined" error even thouygh i already set up may validations corectly. What exacly am i doing wrong?
<div v-for="(user, index) in users" :key="index" >
<div>
<Input
label="name"
v-model="user.name"
#blur="$v.user.name.$touch()"
/>
</div>
<div >
<Input
label="Date"
mask="##/##/####"
v-model="user.birth"
#blur="$v.user.birth.$touch()"
/>
</div>
</div>
data() {
return {
users: [
{
name: '',
birth: '',
}
],
}
validations: {
benefs: {
$each: {
name: {
required
},
birth: {
required
}
}
},
Did you import the library on your page?
You can try to use
#blur="$v.user.name.required"
I have a simple function that manipulates a data between true and false. I use it to make my div hidden and visible like a toggle. I also have a with three element. I found out that I cannot use #click for <option> elements, I need to use #change for my <select>.
But in this way, whenever an is selected, the function is being triggered and my data toggles between true and false. Here is my <select> element;
<select #change="isDisabled">
<option>Please select a security type</option>
<option>No Security</option>
<option>Personal</option>
<option>Enterprise</option>
</select>
IsDisabled function takes a variable and change its values between true and false so my div becomes hidden and visible as follows;
<div v-if="noSecurity">something</div>
But here is the thing, I only want to trigger the function when the user select the "No Security" option. Now it's being triggered whenever I select an option, so it turned out to be some kind of a toggle. But I want to hide the div when I select the "No Security" option and show the div if something different is selected. What should I do?
I've made a CodeSandbox where you could see the result :
https://codesandbox.io/s/magical-meitner-63eno?file=/src/App.vue
But here is the explanation:
<template>
<section>
<select #change="isDisabled">
<option>Please select a security type</option>
<option>No Security</option>
<option>Personal</option>
<option>Enterprise</option>
</select>
<div v-if="noSecurity">You Choose no security, that's dangerous !</div>
</section>
</template>
<script>
import HelloWorld from "./components/HelloWorld";
export default {
name: "App",
data() {
return {
noSecurity: false,
};
},
methods: {
isDisabled(e) {
console.log("e", e.target.value);
if (e.target.value === "No Security") {
// do your change
return (this.noSecurity = !this.noSecurity);
}
// to allow reset if another option is selected
if (this.noSecurity) {
return this.noSecurity = false;
}
},
},
};
</script>
Basically when you use the #change handler, your function will receive an event, in this event you can catch the target value with event.target.value.
Doing so, you do a condition if the value is equal to No Security (so the selected item), you change your state, if it's not No Security, you do nothing, or you do something else you would like to do.
Appart from that, I advice you to change your method name isDisabled to a global convention name like handleChange, or onChange.
Pass id values in your option so when you get the select event you're clear that No security or whatver the name you would like to change will be the same.
Because if one day you change No security to another name, you have to update all your conditions in your app. Try to avoid conditions with strings values like this if you can.
<option value="1">No Security</option> // :value="securityType.Id" for example if coming from your database
<option value="2">Personal</option>
<option value="3">Enterprise</option>
then in your function it will be
if (e.target.value === noSecurityId) {
// do your change
this.noSecurity = !this.noSecurity;
}
//...
There's no need for the additional noSecurity variable. Create your select with v-model to track the selected value. Give each option a value attribute.
<select v-model="selected">
<option value="">Please select a security type</option>
<option value="none">No Security</option>
<option value="personal">Personal</option>
<option value="enterprise">Enterprise</option>
</select>
Check that value:
<div v-if="selected === 'none'">something</div>
You can still use the noSecurity check if you prefer by creating a computed:
computed: {
noSecurity() {
return this.selected === 'none';
}
}
Here's a demo showing both:
new Vue({
el: "#app",
data() {
return {
selected: ''
}
},
computed: {
noSecurity() {
return this.selected === 'none';
}
},
methods: {},
created() {}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<select v-model="selected">
<option value="">Please select a security type</option>
<option value="none">No Security</option>
<option value="personal">Personal</option>
<option value="enterprise">Enterprise</option>
</select>
<div v-if="selected === 'none'">something</div>
<div v-if="noSecurity">something</div>
</div>
Is using v-model instead of using a method is option for you? If it is, please try the following:
HTML:
<div id="hello-vue" class="demo">
<select v-model="security">
<option>Please select a security type</option>
<option>No Security</option>
<option>Personal</option>
<option>Enterprise</option>
</select>
<div v-if="security=='No Security'">something</div>
</div>
JS:
const HelloVueApp = {
data() {
return {
security: undefined
}
}
}
I want to bind a class to an element based on the result of a boolean expression. For example:
<input type="email" :class="{ invalid: submitted && $v.email.$error }">
But the "invalid" class is not added to the element if I evaluate both conditions; it only works when I evaluate one or the other, for example:
<input type="email" :class="{ invalid: submitted }">
or
<input type="email" :class="{ invalid: $v.email.$error }">
work just fine. I realize I could use computed properties for this, but I'd have to create a computed property for each field in my web form and that seems redundant. Is there a better way?
<input type="email" :class="{ invalid: formValid($v.email.$error) }">
computed: {
formValid(){
return (val) {
val && this.submitted ? true : false
}
}
}
Could you test this out im curious if it would work, then you just have to pass a param and need one Computed.
Your Code
<input type="email" :class="{ invalid: submitted && $v.email.$error }">
The problem here, even though you defined $v in your local state, Vue is unable to find it. Try to define your local state in your data property without a preceding dollar sign. Because $ carries an extra meaning in Vue.
Generally $ means instance properties like data, el, root, children etc.
For example to access what element your Vue instance is mounted on, you can use this.$el.
So you can modify your code like this -
<input type="email" :class="{ invalid: submitted && $data.$v.email.$error }">
I think I've found a pretty good solution. I used a method with an argument instead of computed properties:
<template>
<form #submit.prevent="onSubmit" novalidate>
<input
type="email"
:class="{ invalid: isInvalid($v.email.$error) }"
v-model.lazy="email">
<button type="submit">Submit</button>
</form>
</template>
<script>
import { required, email } from 'vuelidate/lib/validators'
export default {
data () {
return {
email: '',
submitted: false
}
},
validations: {
email: {
required,
email
},
},
methods: {
isInvalid (val) {
return val && this.submitted
},
onSubmit () {
this.submitted = true
if (!this.$v.$invalid) {
// do something with the email address
}
}
}
}
</script>
I have the following form where the input fields are dynamically generated however when I update the fields the two way binding isn't happening - nothing is changing when i view the results in dev tools?
<template v-for="field in formFields" :key="field.name">
<div class="form-group" v-if="field.type == text'">
<label class="h4" :for="field.label" v-text="field.label"></label>
<span class="required-asterisk" v-if="field.required"> *</span>
<input :class="field.className"
:id="field.name"
:name="field.name"
type="text"
:maxlength="!!field.maxLength ? field.maxLength : false"
v-validate="{ required: field.required}"
:data-vv-as="field.label"
v-model="form[field.name]"/>
<span class="field-validation-error" v-show="errors.has(field.name)" v-text="errors.first(field.name)"></span>
</div>
</template>
And the following vue instance:
export default {
props: ['formFields'],
data: function () {
return {
form: {},
}
},
created: function() {
this.resetForm();
},
methods: {
resetForm: function() {
this.form = {
'loading': false
}
_.each(this.formFields, (field) => {
this.form[field.name] = field.value;
});
$('#editModal').modal('hide');
this.errors.clear();
}
}
}
When I hard code the values in the form it seems to work:
this.form = {
'loading': false,
'Subject': 'Test',
'Author': 'Roald Dahl'
}
So it seems like something to with the following which it doesn't like:
_.each(this.formFields, (field) => {
this.form[field.name] = field.value;
});
Could it be something to do with the arrow function. Any ideas chaps?
You're running into a limitation of Vue's reactivity, which is spelled out in the documentation
Instead of
this.form[field.name] = field.value;
use
this.$set(this.form, field.name, field.value);
Trying changing the following:
<div class="form-group" v-if="field.type 'text'"> ->
<div class="form-group" v-if="field.type == 'text'">
and the model data object like this
data: {
form: {},
},
https://jsfiddle.net/Jubels/eywraw8t/373132/ Example here. For testing purposes I removed the validation
Instead of
this.form[field.name] = field.value;
use
this.$set(this.form, field.name, field.value);
this.form.splice(field.name, 1, field.value)
or
Vue.set(this.form, field.name, field.value);
this.form.splice(field.name, 1, field.value)
More information in : https://v2.vuejs.org/v2/guide/list.html#Caveats