[FIXED] How to using Array Loop on validation Form using Vue?

Issue

I would like to create a simple web app that can validation form using Vue?

I have two input fields, firstname[1] and firstname[2]

 data: {  
    firstname: ['',''],
 }

I want to use the following code to validate the form, but finally not suessful.

computed: {
    missfirstname(){ 
        for(var i=1;i<this.firstname.length;i++){
         if(this.firstname[i] =='' && this.attemptSubmit) {
           this.firstname_ErrMsg[i] = 'Not be empty';
           return true;
          }
           return false;
        }
    }
 },
  methods: {
    validateForm: function (e) {
        this.attemptSubmit = true;
         if(this.missfirstname){
            e.preventDefault();
           }else{
            return true;
           }
    }
  },

Is it possible to use array Loop on the validation form??

here it my code I am using Vue 2

my full code

script.js

var app = new Vue({
  el: '#app',
  data: {  
    firstname: ['',''],
    firstname_ErrMsg: ['',''],
    attemptSubmit: false
  },
  mounted () {
    var self = this;
   },
computed: {
    missfirstname(){  
        for(var i=1;i<this.firstname.length;i++){
         if(this.firstname[i] =='' && this.attemptSubmit) {
           this.firstname_ErrMsg[i] = 'Not be empty';
           return true;
          }
           return false;
        }
    }
 },
  methods: {
    validateForm: function (e) {
        this.attemptSubmit = true;
         if(this.missfirstname){
            e.preventDefault();
           }else{
            return true;
           }
    }
  },
})

index.html

<div id="app">
<form action='process.php' method="post" autocomplete="off" name="submit_form" v-on:submit="validateForm">    
  firstname1 : <input type='text' id='firstname1' name='firstname1' alt='1' v-model='firstname[1]'>
 <div v-if="missfirstname">{{firstname_ErrMsg[1]}}</div>     
    <br><br>
  firstname2 :    
  <input type='text' id='firstname2' name='firstname2' alt='2' v-model='firstname[2]'>
    <div v-if="missfirstname">{{firstname_ErrMsg[2]}}</div> 
    <br><br>         
  <input id="submit" class="preview_button" name="submit_form" type="submit">  
</form>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js'></script>
<script src='js/script.js'></script>

Solution

Observations :

• missfirstname property should be separate for each field else it will be difficult to assign the error for a specific field.
• Instead of iterating over a this.firstname everytime in computed property, you can use @blur and check the value for that particular field which user touched.
• v-model properties should be unique else it will update other one on changing current one.

Your user object should be like this and you can use v-for to iterate it in HTML for dynamic fields creation instead of hardcoding.

data: {
  user: [{
    name: 'firstName1',
    missfirstname: false
  }, {
    name: 'firstName2',
    missfirstname: false
  }]
}

Now, In validateForm() you can just pass the index of the iteration and check the model value. If value is empty, you can assign missfirstname as true for that particular index object in user array.

Update : As per author comment, assigning object in users array via for loop.

data: {
  users: []
},
mounted() {
  for(let i = 1; i <= 2; i++) {
    this.users.push({
      name: 'firstName' + i,
      missfirstnam: false
    })
  }
}

Answered By - Rohìt Jíndal

Answer Checked By - David Goodson (PHPFixing Volunteer)