title: Validating forms in Veu 3 using v-for
body: <p>I am building a simple web app using Vue 3. The aim is to take information from the user and send that to the back end.My issue is that each field is required. When I try to validate the form for the form that is not within the v-for variable, it works but the validation does not work for the form in the v-form.</p>
  <p>Below is my code. I am new to Vue after moving from angular js and hope this is something that can work fine:</p>
  <pre><code>    &lt;template &gt;
   
  
                      &lt;div class=&quot;options&quot;&gt;
                        &lt;div class=&quot;legal field&quot;&gt;
                          &lt;input
                            type=&quot;radio&quot;
                            id=&quot;legal&quot;
                            value=&quot;true&quot;
                            v-model=&quot;entityA&quot;
                          /&gt;
                          &lt;label for=&quot;legal&quot;&gt;Legal Entity&lt;/label&gt;
                          &lt;div class=&quot;custom-radio&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;individual field&quot;&gt;
                          &lt;input
                            type=&quot;radio&quot;
                            id=&quot;individual&quot;
                            value=&quot;false&quot;
                            v-model=&quot;entityA&quot;
                          /&gt;
                          &lt;label for=&quot;individual&quot;&gt;Individual &lt;/label&gt;
                          &lt;div class=&quot;custom-radio&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;h2 class=&quot;headFont&quot;&gt;Party 1&lt;/h2&gt;
                      &lt;form @submit.prevent=&quot;handleSubmit1()&quot; &gt;
                        &lt;div v-if=&quot;entityA == 'true'&quot;&gt;
                          &lt;p for=&quot;&quot;&gt;Company Name*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Company Name&quot;
                            v-model=&quot;companyNameA&quot;
                            autocomplete=&quot;off&quot;                  
                            @keyup=&quot;validateCompanyName1&quot;
                            @blur=&quot;validateCompanyName1&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error1a&quot;&gt;
                            {{ error1a }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Registered Address*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Registered Address&quot;
                            autocomplete=&quot;off&quot;
                            v-model=&quot;companyAddressA&quot;
                            @keyup=&quot;validateCompanyAddress1&quot;
                            @blur=&quot;validateCompanyAddress1&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error2a&quot;&gt;
                            {{ error2a }}
                          &lt;/div&gt;
                          &lt;p for=&quot;&quot;&gt;Registration Number*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Registration Number&quot;
                            v-model=&quot;companyRegNoA&quot;
                            autocomplete=&quot;off&quot;
                            @keyup=&quot;validateCompanyRegNo1&quot;
                            @blur=&quot;validateCompanyRegNo1&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error3a&quot;&gt;
                            {{ error3a }}
                          &lt;/div&gt;
                          &lt;p for=&quot;&quot;&gt;Registration Country*&lt;/p&gt;
                          &lt;select
                            v-model=&quot;companyRegCoA&quot;
                            name=&quot;lender-legal-country-1&quot;
                            @keyup=&quot;validateCompanyRegCo1&quot;
                            @blur=&quot;validateCompanyRegCo1&quot;
                            required
                          &gt;
                            &lt;option value=&quot;&quot; selected disabled&gt;Select&lt;/option&gt;
                            &lt;option value=&quot;Afganistan&quot;&gt;Afghanistan&lt;/option&gt;
                            &lt;option value=&quot;Albania&quot;&gt;Albania&lt;/option&gt;
                            &lt;option value=&quot;Algeria&quot;&gt;Algeria&lt;/option&gt;
                            &lt;option value=&quot;American Samoa&quot;&gt;American Samoa&lt;/option&gt;
                            &lt;option value=&quot;Andorra&quot;&gt;Andorra&lt;/option&gt;
                            &lt;option value=&quot;Angola&quot;&gt;Angola&lt;/option&gt;
                            &lt;option value=&quot;Anguilla&quot;&gt;Anguilla&lt;/option&gt;
                            &lt;option value=&quot;Antigua &amp; Barbuda&quot;&gt;
                              Antigua &amp; Barbuda
                            &lt;/option&gt;
                            &lt;option value=&quot;Argentina&quot;&gt;Argentina&lt;/option&gt;
                            &lt;option value=&quot;Armenia&quot;&gt;Armenia&lt;/option&gt;
                            &lt;option value=&quot;Aruba&quot;&gt;Aruba&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error4a&quot;&gt;
                            {{ error4a }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Defined as...*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Defined as...&quot;
                            v-model=&quot;DefA&quot;
                            autocomplete=&quot;off&quot;
                            @keyup=&quot;validateDef1&quot;
                            @blur=&quot;validateDef1&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error5a&quot;&gt;
                            {{ error5a }}
                          &lt;/div&gt;
                        &lt;/div&gt;
  
                        &lt;div v-if=&quot;entityA == 'false'&quot;&gt;
                          &lt;p for=&quot;&quot;&gt;First name*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;First name&quot;
                            v-model=&quot;firstnameA&quot;
                            @keyup=&quot;validateFirstName1&quot;
                            @blur=&quot;validateFirstName1&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error6a&quot;&gt;
                            {{ error6a }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Last name*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Last Name&quot;
                            v-model=&quot;lastnameA&quot;
                            @keyup=&quot;validateLastName1&quot;
                            @blur=&quot;validateLastName1&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error7a&quot;&gt;
                            {{ error7a }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Address*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Address&quot;
                            v-model=&quot;addressA&quot;
                            @keyup=&quot;validateAddress1&quot;
                            @blur=&quot;validateAddress1&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error8a&quot;&gt;
                            {{ error8a }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Defined as..*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Defined as..&quot;
                            v-model=&quot;DefA&quot;
                            @keyup=&quot;validateDef1B&quot;
                            @blur=&quot;validateDef1B&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error9a&quot;&gt;
                            {{ error9a }}
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/form&gt;
  
                &lt;!-- -------  Party 2  ------ --&gt;
              
  
  &lt;div v-for=&quot;(p, index) in parties&quot; :key=&quot;index&quot;&gt;
                            &lt;button class=&quot;removeBtn&quot; @click=&quot;removeParty(index)&quot;&gt;
                            &amp;nbsp;Remove
                          &lt;/button&gt;
                          &lt;div class=&quot;options fields&quot;&gt;
                            &lt;div class=&quot;legal field&quot;&gt;
                              &lt;input
                                type=&quot;radio&quot;
                                id=&quot;legal&quot;
                                value=&quot;true&quot;
                                v-model=&quot;p.lentity&quot;
                              /&gt;
                              &lt;label for=&quot;legal&quot;&gt;Legal Entity&lt;/label&gt;
                              &lt;div class=&quot;custom-radio&quot;&gt;&lt;/div&gt;
                            &lt;/div&gt;
  
                            &lt;div class=&quot;individual field&quot;&gt;
                              &lt;input
                                type=&quot;radio&quot;
                                id=&quot;individual&quot;
                                value=&quot;false&quot;
                                v-model=&quot;p.lentity&quot;
                              /&gt;
                              &lt;label for=&quot;individual&quot;&gt;Individual&lt;/label&gt;
                              &lt;div class=&quot;custom-radio&quot;&gt;&lt;/div&gt;
                            &lt;/div&gt;
                          &lt;/div&gt;
  
                      &lt;h2 class=&quot;headFont&quot;&gt;Party {{index + 2}}&lt;/h2&gt;
                      &lt;form
                        @submit.prevent=&quot;handleSubmit1()&quot;
                        id=&quot;lendor-legal-form-1&quot;
                        class=&quot;ui form&quot;
                      &gt;
                        &lt;div v-if=&quot;entity == 'true'&quot;&gt;
                          &lt;p for=&quot;&quot;&gt;Company Name*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Company Name&quot;
                            v-model=&quot;p.cName&quot;
                            autocomplete=&quot;off&quot;
                            @keyup=&quot;validateCompanyName2&quot;
                            @blur=&quot;validateCompanyName2&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error1&quot;&gt;
                            {{ error1 }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Registered Address*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Registered Address&quot;
                            autocomplete=&quot;off&quot;
                            v-model=&quot;p.cAddress&quot;
                            @keyup=&quot;validateCompanyAddress2&quot;
                            @blur=&quot;validateCompanyAddress2&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error2&quot;&gt;
                            {{ error2 }}
                          &lt;/div&gt;
                          &lt;p for=&quot;&quot;&gt;Registration Number*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Registration Number&quot;
                            v-model=&quot;p.cRegNo&quot;
                            autocomplete=&quot;off&quot;
                            @keyup=&quot;validateCompanyRegNo2&quot;
                            @blur=&quot;validateCompanyRegNo2&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error3&quot;&gt;
                            {{ error3 }}
                          &lt;/div&gt;
                          &lt;p for=&quot;&quot;&gt;Registration Country*&lt;/p&gt;
                          &lt;select
                            v-model=&quot;p.cRegCo&quot;
                            name=&quot;lender-legal-country-1&quot;
                            @keyup=&quot;validateCompanyRegCo2&quot;
                            @blur=&quot;validateCompanyRegCo2&quot;
                            required
                          &gt;
                            &lt;option value=&quot;&quot; selected disabled&gt;Select&lt;/option&gt;
                            &lt;option value=&quot;Afganistan&quot;&gt;Afghanistan&lt;/option&gt;
                            &lt;option value=&quot;Albania&quot;&gt;Albania&lt;/option&gt;
                            &lt;option value=&quot;Algeria&quot;&gt;Algeria&lt;/option&gt;
                            &lt;option value=&quot;American Samoa&quot;&gt;American Samoa&lt;/option&gt;
                            &lt;option value=&quot;Andorra&quot;&gt;Andorra&lt;/option&gt;
                            &lt;option value=&quot;Angola&quot;&gt;Angola&lt;/option&gt;
                            &lt;option value=&quot;Anguilla&quot;&gt;Anguilla&lt;/option&gt;
                            &lt;option value=&quot;Antigua &amp; Barbuda&quot;&gt;
                              Antigua &amp; Barbuda
                            &lt;/option&gt;
                            &lt;option value=&quot;Argentina&quot;&gt;Argentina&lt;/option&gt;
                            &lt;option value=&quot;Armenia&quot;&gt;Armenia&lt;/option&gt;
                            &lt;option value=&quot;Aruba&quot;&gt;Aruba&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error4&quot;&gt;
                            {{ error4 }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Defined as...*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Defined as...&quot;
                            v-model=&quot;p.Def&quot;
                            autocomplete=&quot;off&quot;
                            @keyup=&quot;validateDef2&quot;
                            @blur=&quot;validateDef2&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error5&quot;&gt;
                            {{ error5 }}
                          &lt;/div&gt;
                        &lt;/div&gt;
  
                        &lt;div v-if=&quot;entity == 'false'&quot;&gt;
                          &lt;p for=&quot;&quot;&gt;First name*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;First name&quot;
                            v-model=&quot;p.firstname&quot;
                            @keyup=&quot;validateFirstName2&quot;
                            @blur=&quot;validateFirstName2&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error6&quot;&gt;
                            {{ error6 }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Last name*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Last Name&quot;
                            v-model=&quot;p.lastname&quot;
                            @keyup=&quot;validateLastName2&quot;
                            @blur=&quot;validateLastName2&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error7&quot;&gt;
                            {{ error7 }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Address*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Address&quot;
                            v-model=&quot;p.address&quot;
                            @keyup=&quot;validateAddress2&quot;
                            @blur=&quot;validateAddress2&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error8&quot;&gt;
                            {{ error8 }}
                          &lt;/div&gt;
  
                          &lt;p for=&quot;&quot;&gt;Defined as..*&lt;/p&gt;
                          &lt;input
                            type=&quot;text&quot;
                            placeholder=&quot;Defined as..&quot;
                            v-model=&quot;p.Def&quot;
                            @keyup=&quot;validateDef2B&quot;
                            @blur=&quot;validateDef2B&quot;
                            required
                          /&gt;
                          &lt;div class=&quot;ui basic label pointing red&quot; v-if=&quot;error9&quot;&gt;
                            {{ error9 }}
                          &lt;/div&gt;
                        &lt;/div&gt;
  
                      &lt;/form&gt;
                    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { ref } from &quot;vue&quot;;
  
  export default {
    setup() {
  
      const entityA = ref(&quot;true&quot;);
  
      //for first form Party 1
      const error1a = ref(&quot;&quot;);
      const error2a = ref(&quot;&quot;);
      const error3a = ref(&quot;&quot;);
      const error4a = ref(&quot;&quot;);
      const error5a = ref(&quot;&quot;);
      const error6a = ref(&quot;&quot;);
      const error7a = ref(&quot;&quot;);
      const error8a = ref(&quot;&quot;);
      const error9a = ref(&quot;&quot;);
  
      //for second form Party 2
      const error1 = ref(&quot;&quot;);
      const error2 = ref(&quot;&quot;);
      const error3 = ref(&quot;&quot;);
      const error4 = ref(&quot;&quot;);
  
      const error5 = ref(&quot;&quot;);
      const error6 = ref(&quot;&quot;);
      const error7 = ref(&quot;&quot;);
      const error8 = ref(&quot;&quot;);
      const error9 = ref(&quot;&quot;);
  
      //for companies
      const companyNameA = ref(&quot;&quot;);
      const companyAddressA = ref(&quot;&quot;);
  
      const companyRegNoA = ref(&quot;&quot;);
      const companyRegCoA = ref(&quot;&quot;);
      const DefA = ref(&quot;&quot;);
  
      //for individuals
      const firstnameA = ref(&quot;&quot;);
      const lastnameA = ref(&quot;&quot;);
      const addressA = ref(&quot;&quot;);
  
      //additional parties
      const partiesNumber = ref(0);
      const parties = ref([]);
      const lentity = ref(&quot;&quot;);
      const cName = ref(&quot;&quot;);
      const cAddress = ref(&quot;&quot;);
      const cRegNo = ref(&quot;&quot;);
      const cRegCo = ref(&quot;&quot;);
      const aDef = ref(&quot;&quot;);
      const iFirstname = ref(&quot;&quot;);
      const iLastname = ref(&quot;&quot;);
      const iAddress = ref(&quot;&quot;);
  
      const addParty = () =&gt; {
        partiesNumber.value++;
  
        parties.value.push({
          id: `party${partiesNumber.value + 2}`,
          lentity: &quot;&quot;,
          cName: &quot;&quot;,
          cAddress: &quot;&quot;,
          cRegNo: &quot;&quot;,
          cRegCo: &quot;&quot;,
          aDef: &quot;&quot;,
          iFirstname: &quot;&quot;,
          iLastname: &quot;&quot;,
          iAddress: &quot;&quot;,
          obligations: [],
        });
      };
  
      //validate forms for step 1
      const validateCompanyName1 = () =&gt; {
                 if (entityA.value =='true') {
           error1a.value = companyNameA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
          const validateCompanyAddress1 = () =&gt; {
                 if (entityA.value =='true') {
            error2a.value = companyAddressA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
      const validateCompanyRegNo1 = () =&gt; {
                 if (entityA.value =='true') {
             error3a.value = companyRegNoA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
   const validateCompanyRegCo1 = () =&gt; {
                 if (entityA.value =='true') {
              error4a.value = companyRegCoA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
       const validateDef1 = () =&gt; {
                 if (entityA.value =='true') {
             error5a.value = DefA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
  
         const validateFirstName1 = () =&gt; {
                 if (entityA.value === &quot;false&quot;) {
          error6a.value = firstnameA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
          const validateLastName1 = () =&gt; {
                 if (entityA.value === &quot;false&quot;) {
          error7a.value = lastnameA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
          const validateAddress1 = () =&gt; {
                 if (entityA.value === &quot;false&quot;) {
          error8a.value =  addressA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
        const validateDef1B = () =&gt; {
                 if (entityA.value === &quot;false&quot;) {
           error9a.value = DefA.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
          }
      
      const validateCompanyName2 = () =&gt; {
                 if (lentity.value =='true') {
           error1.value = cName.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
          const validateCompanyAddress2 = () =&gt; {
                 if (lentity.value =='true') {
            error2.value = cAddress.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
      const validateCompanyRegNo2 = () =&gt; {
                 if (lentity.value =='true') {
             error3.value = cRegNo.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
   const validateCompanyRegCo2 = () =&gt; {
                 if (lentity.value =='true') {
              error4.value = cRegCo.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
       const validateDef2 = () =&gt; {
                 if (lentity.value =='true') {
             error5.value = aDef.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
  
         const validateFirstName2 = () =&gt; {
                 if (lentity.value === &quot;false&quot;) {
          error6.value = iFirstname.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
          const validateLastName2 = () =&gt; {
                 if (lentity.value === &quot;false&quot;) {
          error7.value = iLastname.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
          const validateAddress2 = () =&gt; {
                 if (lentity.value === &quot;false&quot;) {
          error8.value =  iAddress.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
      };
  
        const validateDef2B = () =&gt; {
                 if (lentity.value === &quot;false&quot;) {
           error9.value = aDef.value === &quot;&quot; ? &quot;This Input field is required&quot; : &quot;&quot;;
          }
          }
  
      //remove party
      const removeParty = (p) =&gt; {
        parties.value.splice(p, 1);
      };
  
  
      return {
        entityA,
        companyNameA,
        companyAddressA,
        companyRegNoA,
        companyRegCoA,
        DefA,
        firstnameA,
        lastnameA,
        addressA,
        handleSubmit1,
        addParty,
        parties,
        partiesNumber,
        input2,
        lentity,
        cName,
        cAddress,
        cRegNo,
        cRegCo,
        iFirstname,
        iLastname,
        iAddress,
        aDef,
        removeParty,
        validateCompanyName1,
        validateCompanyAddress1,
        validateCompanyRegNo1,
        validateCompanyRegCo1,
        validateDef1,
         validateFirstName1,
          validateLastName1,
          validateAddress1,
          validateDef1B,
         validateCompanyName2,
        validateCompanyAddress2,
        validateCompanyRegNo2,
        validateCompanyRegCo2,
        validateDef2,
         validateFirstName2,
          validateLastName2,
          validateAddress2,
          validateDef2B,
        activeStep,
        animation,
        error1a,
        error2a,
        error3a,
        error4a,
        error5a,
        error6a,
        error7a,
        error8a,
        error9a,
        error1,
        error2,
        error3,
        error4,
        error5,
        error6,
        error7,
        error8,
        error9,
      };
    },
  };
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>