VueJs + Dynamic form fields validation

Question

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

Image validation

My Form

    <b-form class="needs-validation" @submit="onCustomStyleSubmit" >
    <div class="form-row" >
        <div class="col-md-4 mb-3"  >
            <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 class="col-md-4 mb-3">
            <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 class="col-md-4 mb-3">
            <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 class="form-row">
        <div class="col-md-4 mb-3">
            <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 class="col-md-4 mb-3">
            <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 class="col-md-4 mb-3">
            <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 class="form-row">
        <div class="col-md-4 mb-3">
            <label for="c_form_fund">Province</label>
            <div class="form-group">
              <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 class="col-md-4 mb-3">
            <label for="c_form_fund">Municipality</label>
            <div class="form-group">
              <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 class="col-md-4 mb-3">
            <label for="c_form_fund">Barangay</label>
            <div class="form-group">
              <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>

why don't you use vuelidate library for the validations? it would be simpler to handle validations for you. — Shreeraj
– Shreeraj, Commented Jul 20, 2022 at 6:41
@Shreeraj The thing is we don't want to use libraries :(, is there any way using customize or loop each field? — marivic valdehueza
– marivic valdehueza, Commented Jul 20, 2022 at 6:50

Shreeraj · Accepted Answer · 2022-07-20 07:24:39Z

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 key is present in this.c_form object
If the key is present in this.c_form_result object
If the key in the this.c_form is not empty

If it fulfills all the three conditions then it will assign true or else it will assign false.

Collectives™ on Stack Overflow

VueJs + Dynamic form fields validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related