I have a form that would ask user to input personal information, such as Fname, Lname, cellphone, address, etc.
For address, it is broken into 6 input boxes, namely
Street Address Line 1
Street Address Line 2
City
Province
Country
Postal Code/ZIP
Now, the problem is that I need to make sure the user must either
leave all 6 fields blank
or
fill out all 5 fields (except Street Address Line 2 is optional)
The problem I couldnt figure out is that
I know how to make a < base-input > "required", but how do you make a < b-form-select > "required" ?
After making them required, how do I do it conditionally? I am guessing a if statement that checks if any one of the five required fields are not null, but how?
<template>
<validation-observer ref="formValidator">
<b-form role="form">
<!-- I will skip all others input fields and show one that works with validaiton already. -->
<b-row>
<b-col>
<b-form-group>
<b-input-group>
<base-input
v-model="Cell"
type="tel"
pattern="[0-9]{3}[0-9]{3}[0-9]{4}"
:rules="{ required: true }"
:placeholder="$t('Cell Phone')"
:label="$t('Cell Phone') + '* (10 digits)'"
ref="cellphone"
name="cellphone"
#focus="handleinput('cellphone')" id="cellphone"
></base-input>
</b-input-group>
</b-form-group>
</b-col>
</b-row>
<!-- Above is one that is working, but it is not conditional. How do I make the below three fields required conditionally? -->
<b-row>
<b-col>
<b-form-group>
<b-input-group>
<base-input
:rules="{ required: true }"
v-model="Street1"
:placeholder="$t('Address Line 1')"
:label="$t('Address Line 1')"
ref="address_line_1"
name="address line 1"
#focus="handleinput('address1')" id="address1"
></base-input>
</b-input-group>
</b-form-group>
</b-col>
<b-col>
<div>
<label class="form-control-label">{{ $t("Country") }}</label>
<div class="has-label">
<b-form-select
v-model="address.CountryIDn"
#change="changeCountry"
>
<option value="0">--{{ $t("Country") }}--</option>
<option
v-for="(country, index) in countries"
:key="index"
:value="country.IDn"
>
{{ country.Country }}
</option>
</b-form-select>
</div>
</div>
</b-col>
<b-col>
<div>
<label class="form-control-label">{{ $t("Province") }}</label>
<div class="has-label">
<b-form-select v-model="address.ProvinceIDn">
<option value="0">--{{ $t("Province") }}--</option>
<option
v-for="(province, index) in provinces"
:key="index"
:value="province.IDn"
>
{{ province.Province }}
</option>
</b-form-select>
</div>
</div>
</b-col>
</b-form>
</validation-observer>
</template>
Related
I am using vue draggable element like this
<b-row v-for="(stage,index) in Pdata" :key="index">
<!-- people group 1 -->
<b-col md="6">
<h6 class="text-primary font-weight-bold mb-2">
{{stage.stage}}
</h6>
<!-- draggable -->
<draggable
:list="stage.items"
group="people"
class="list-group list-group-flush cursor-move"
>
<b-list-group-item
v-for="listItem in stage.items"
:key="listItem.id"
tag="li"
>
<div class="d-flex">
<b-card>
<b-card-text >
{{listItem.name}}
</b-card-text>
</b-card>
<!-- <b-avatar :text="listItem.name.slice(0,2)" />
<div class="ml-25">
<b-card-text class="mb-0 font-weight-bold">
{{ listItem.name }}
</b-card-text>
<small>{{ listItem.email }}</small>
</div> -->
</div>
</b-list-group-item>
</draggable>
</b-col>
</b-col> -->
</b-row>
here the structure of Pdata is like this
Pdata :[
{stage:'1',
id:'1'
items:[]
},
{stage:'2',
id:'2'
items:[]
}
{stage:'3',
id:'3'
items:[]
}
]
here after the vue drag operation i want to add element to the particular Stage in which the item is dragged. How can i get the particular stage id in Pdata so that data can be changed in database ?
I am using vue draggable element like this
<b-row v-for="(stage,index) in Pdata" :key="index">
<!-- people group 1 -->
<b-col md="6">
<h6 class="text-primary font-weight-bold mb-2">
{{stage.stage}}
</h6>
<!-- draggable -->
<draggable
:list="stage.items"
group="people"
class="list-group list-group-flush cursor-move"
>
<b-list-group-item
v-for="listItem in stage.items"
:key="listItem.id"
tag="li"
>
<div class="d-flex">
<b-card>
<b-card-text >
{{listItem.name}}
</b-card-text>
</b-card>
<!-- <b-avatar :text="listItem.name.slice(0,2)" />
<div class="ml-25">
<b-card-text class="mb-0 font-weight-bold">
{{ listItem.name }}
</b-card-text>
<small>{{ listItem.email }}</small>
</div> -->
</div>
</b-list-group-item>
</draggable>
</b-col>
</b-col> -->
</b-row>
here the structure of Pdata is like this
Pdata :[
{stage:'1',
id:'1'
items:[]
},
{stage:'2',
id:'2'
items:[]
}
{stage:'3',
id:'3'
items:[]
}
]
here the draggable element is put on the Pdata.items which is an array of objects,
How can I trigger a function which should detect the data is dragged across the list and the target list name and id so that i can store the data in databases
I want to validate a multiple select filed (v-select) with vee-validate validationProvider.
For single select option it is working fine. but when i am trying for the multiple select it is not working.
How can i do this?
I have tried:
<ValidationProvider name="types" vid="types">
<b-form-group
class="row"
label-cols-sm="4"
label-for="types"
slot-scope="{ valid, errors }"
>
<template v-slot:label>
Types <span class="text-danger">*</span>
</template>
<v-select
id="hat_days"
v-model="profile.types"
:reduce="op => op.value"
multiple
:options="TypeList"
label="text"
:state="errors[0] ? false : (valid ? true : null)"
:placeholder="Select Type"
required
>
</v-select>
<div class="invalid-feedback">
{{ errors[0] }}
</div>
</b-form-group>
Also tried:
<ValidationProvider name="types" vid="types" rules='required|min:1'> // Or rules='required|min_value:1'
<b-form-group
class="row"
label-cols-sm="4"
label-for="types"
slot-scope="{ valid, errors }"
>
<template v-slot:label>
Types <span class="text-danger">*</span>
</template>
<v-select
id="hat_days"
v-model="profile.types"
:reduce="op => op.value"
multiple
:options="TypeList"
label="text"
:state="errors[0] ? false : (valid ? true : null)"
:placeholder="Select Type"
required
>
</v-select>
<div class="invalid-feedback">
{{ errors[0] }}
</div>
</b-form-group>
I have multiple drop-downs from same api.I would like to filter out the selected code-option from next drop downs.
If i select code1 from first drop down,code1 should not display in 2nd drop down.A computed property for students api will be nice.
<div>
<label class="label">Student1</label>
</div>
<select class="input"
:class="{ 'placeholder': item1Input === 0 }"
v-model="item1Input">
<option v-for="(item, index) in students"
:key="index"
:value="index >
{{ item.code}}
</option>
</select>
</div>
<div>
<label class="label">Student2</label>
</div>
<select class="input"
:class="{ 'placeholder': item2Input === 0 }"
v-model="item2nput">
<option v-for="(item, index) in students"
:key="index"
:value="index>
{{ item.code}}
</option>
</select>
</div>
Here i have 2 names, firstname & lastname. How do i autogenerate a different name using first and last names
(eg: firstname.lastname or firstname_lastname)
<q-input name="firstname" v-model="first" float-label="First name"
v-validate="'required|alpha_spaces'" clearable/>
<i v-show="errors.has('firstname')" class="fa fa-warning "></i>
<div class="containerError">
<span v-show="errors.has('firstname')" class="text-negative text-right">{{ errors.first('firstname') }}</span>
</div>
<q-input name="lastname" required="required" v-model="last" float-label="Last name" v-validate="'required|alpha_spaces'" clearable />
<i v-show="errors.has('lasttname')" class="fa fa-warning "></i>
<div class="containerError"> <span v-show="errors.has('lastname')" class="text-negative text-right">{{ errors.first('lastname') }}</span>
</div>
<template>
<div v-if="this.last != ''" float-label="fullname">
User-name :{ {this.first}}.{{this.last}}
</div>
</template>