I know this is common to ask, but I'm confused about how to implement dynamic validation on every form field, currently, I used if else condition in every field and this is not the proper way. All I want is to put it inside a loop and when null or empty, it identifies the specific fields that have no value. It is possible? need help
My Form
<b-form @submit="onCustomStyleSubmit" >
<div >
<div >
<label for="c_form_cluster">Cluster</label>
<b-form-input type="text" id="c_form_cluster" v-model="c_form.cluster" :state="c_form_result.cluster" placeholder="Cluster"></b-form-input>
<b-form-valid-feedback :state="c_form_result.cluster">Lock Good</b-form-valid-feedback>
</div>
<div >
<label for="c_form_lbp">LBP</label>
<b-form-input type="text" id="c_form_lbp" v-model="c_form.lbp" :state="c_form_result.lbp" placeholder="LBP"></b-form-input>
<b-form-valid-feedback :state="c_form_result.lbp">Lock Good</b-form-valid-feedback>
</div>
<div >
<label for="c_form_amt_certified">Amount Certified</label>
<b-input-group prepend="0.00">
<b-form-input type="number" id="c_form_amt_certified" v-model="c_form.amt_certified" :state="c_form_result.amt_certified" placeholder="amount"></b-form-input>
</b-input-group>
<b-form-invalid-feedback :state="c_form_result.amt_certified">Please choose a unique and valid amt_certified.</b-form-invalid-feedback>
</div>
</div>
<div >
<div >
<label for="c_form_fund">Fund 101</label>
<b-form-input type="text" id="c_form_fund" v-model="c_form.fund" :state="c_form_result.fund" placeholder="Fund"></b-form-input>
<b-form-invalid-feedback :state="c_form_result.fund">Please provide a valid fund.</b-form-invalid-feedback>
</div>
<div >
<label for="c_form_state">Status</label>
<b-form-input type="text" id="c_form_state" v-model="c_form.state" :state="c_form_result.state" placeholder="TE"></b-form-input>
<b-form-invalid-feedback :state="c_form_result.state">Please provide a valid state.</b-form-invalid-feedback>
</div>
<div >
<label for="c_form_employeecode">Employee</label>
<b-form-input type="text" id="c_form_employeecode" v-model="c_form.employee" :state="c_form_result.employee" placeholder="Employee"></b-form-input>
<b-form-invalid-feedback :state="c_form_result.employee">Please provide a valid employee.</b-form-invalid-feedback>
</div>
</div>
<div >
<div >
<label for="c_form_fund">Province</label>
<div >
<b-form-select v-model="c_form.province" :options="province_select_options" :state="c_form_result.province"></b-form-select>
<b-form-invalid-feedback :state="c_form_result.province">Don't leave this blank</b-form-invalid-feedback>
</div>
</div>
<div >
<label for="c_form_fund">Municipality</label>
<div >
<b-form-select v-model="c_form.municipality" :options="municipality_select_options" :state="c_form_result.municipality" placeholder="Municipality"></b-form-select>
<b-form-invalid-feedback :state="c_form_result.municipality">Don't leave this blank</b-form-invalid-feedback>
</div>
</div>
<div >
<label for="c_form_fund">Barangay</label>
<div >
<b-form-select v-model="c_form.barangay" :options="barangay_select_options" :state="c_form_result.barangay" placeholder="Barangay"></b-form-select>
<b-form-invalid-feedback :state="c_form_result.barangay">Don't leave this blank</b-form-invalid-feedback>
</div>
</div>
</div>
<b-button type="submit" variant="secondary">Generate Transaction Number</b-button>
</b-form>
My Script file
<script>
export default {
data(){
return{
c_form:
{
cluster:'',
lbp:'',
amt_certified:'',
fund:'',
state:'',
employee:'',
province:'',
municipality:'',
barangay:'',
qrcode:''
},
c_form_result:{
cluster:null,
lbp:null,
amt_certified:null,
fund:null,
state:null,
employee:null,
province:null,
municipality:null,
barangay:null,
qrcode:null
},
province_select_options: [
{ value: null, text:'Select Province' },
{ value: '1', text:'Agusan Del Norte' },
{ value: '2', text:'Agusan Del Sur' },
{ value: '3', text:'Surigao Del Norte' },
{ value: '4', text:'Surigao Del Sur' },
{ value: '5', text:'Dinagat Islands' }
],
municipality_select_options: [
{ value: null, text:'Select Municipality' },
{ value: '1', text:'Butuan City' },
{ value: '2', text:'Cabadbaran' },
{ value: '3', text:'Lianga' },
{ value: '4', text:'Cantillan' },
{ value: '5', text:'Siargao' }
],
barangay_select_options: [
{ value: null, text:'Barangay' },
{ value: '1', text:'J.P. Rizal' },
{ value: '2', text:'Maon' },
{ value: '3', text:'Mahogany' },
{ value: '4', text:'Villakananga' },
{ value: '5', text:'Poblacion' }
],
//end table
};
},
methods:{
onCustomStyleSubmit(evt){
evt.preventDefault();
// this.onSelectedItems();
let cluster = this.c_form.cluster;
let lbp = this.c_form.lbp;
let amt_certified = this.c_form.amt_certified;
let fund = this.c_form.fund;
let state = this.c_form.state;
let employee = this.c_form.employee;
let province = this.c_form.province;
let municipality = this.c_form.municipality;
let barangay = this.c_form.barangay;
if(cluster !== '') {
this.c_form_result.cluster = true;
} else {
this.c_form_result.cluster = false;
}
if(lbp !== '') {
this.c_form_result.lbp = true;
} else {
this.c_form_result.lbp = false;
}
if(amt_certified!== '') {
this.c_form_result.amt_certified = true;
} else {
this.c_form_result.amt_certified = false;
}
if(fund!== '') {
this.c_form_result.fund = true;
} else {
this.c_form_result.fund = false;
}
if(state !== '') {
this.c_form_result.state = true;
} else {
this.c_form_result.state = false;
}
if(province !== '') {
this.c_form_result.province = true;
} else {
this.c_form_result.province = false;
}
if(municipality !== '') {
this.c_form_result.municipality = true;
} else {
this.c_form_result.municipality = false;
}
if(employee !== '') {
this.c_form_result.employee = true;
} else {
this.c_form_result.employee = false;
}
if(barangay !== '') {
this.c_form_result.barangay = true;
} else if(this.c_form.barangay == '') {
this.c_form_result.barangay = false;
}
console.log(this.c_form);
},
}
};
</script>
CodePudding user response：
Assuming that you are trying to get rid of if...else conditions applied for handling the validations, here is the code that would work dynamically:
onCustomStyleSubmit(evt) {
evt.preventDefault()
for (let key in this.c_form) {
if (
this.c_form_result.hasOwnProperty(key) &&
this.c_form.hasOwnProperty(key) &&
this.c_form[key] !== ''
) {
this.c_form_result[key] = true
} else {
this.c_form_result[key] = false
}
}
}
Make sure that the c_form and c_form_result, both the objects must have identical keys.
Here, we have used for...in loop to make it work dynamically. Inside the loop, the if conditions checks following three things:
- If the
keyis present inthis.c_formobject - If the
keyis present inthis.c_form_resultobject - If the
keyin thethis.c_formis not empty
If it fulfills all the three conditions then it will assign true or else it will assign false.