Vue displays validation text on multiple fields

Question

There are two buttons called ADD and REMOVE. If the user clicks on ADD it will add one more input field for FULL NAME. I am using validationText to display text as PLEASE ENTER MORE THAN 5 CHARACTERS for full name. If I ADD two fields and insert only two characters in second one then it displays validationText on both input fields as

Is there a way to display validationText message to the particular field which consists of less than 5 characters?

View

<div id="app">
  <div class="work-experiences">

      <div class="form-row" v-for="(minordatabase, index) in minorsDetail" :key="index">

        <div class="col">
          <br>
          <label id="minorHeading">FULL NAME</label>
          <input v-model="minordatabase.full_name" type="text" class="form-control" placeholder="FULL NAME" size="lg" @input="checkValidation"/>
          <p v-show="!validationText" style="color:red;">
           Please enter than 5 characters
          </p>
        </div>

      </div>

    </div>

      <br>

      <div class="form-group">
        <button @click="addExperience" type="button" class="btn btn-info" style="margin-right:1.5%;">Add</button>
        <button @click="removeExperience" type="button" class="btn btn-outline-info">Remove Last Field</button>
      </div>
</div>

Script

new Vue({
  el: "#app",
  data: {
    minorsDetail: [
     {
       full_name: "",
       date_of_birth: "",
     }
    ],
    validationText: true
  },
  methods: {
    checkValidation(){
        console.log("SAN");
      var minorsDetailLastElement = this.minorsDetail[this.minorsDetail.length-1].full_name.length;
      console.log(minorsDetailLastElement);
        if(minorsDetailLastElement > 2){
        this.validationText = false;
      }
      if(minorsDetailLastElement > 5){
       this.validationText = true;
      }
    },

    addExperience(){
          this.minorsDetail.push({
            full_name: ''
          })

    },

    removeExperience: function(todo){

          var index = this.minorsDetail.indexOf(todo)
          this.minorsDetail.splice(index, 1)
          this.removeMinorFieldFunction();
    },

  }
})

Below is the code on JSFIDDLE

https://jsfiddle.net/ujjumaki/5mqp1bag/28/

Jaye Hernandez · Accepted Answer · 2020-06-15 01:19:47Z

1

You only have one validationText for all fields. So, if you set it for one field, it's going to show up in the other field too.

I recommend doing something like this instead to show the validation:

<p v-if="minordatabase.full_name.length > 2 && minordatabase.full_name.length < 5" style="color: red;">
  Please enter more than 5 characters
</p>

answered Jun 15, 2020 at 1:19

Jaye Hernandez

5661 gold badge5 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue displays validation text on multiple fields

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