CODEWITHSUNDEEP
formsvue.jsvalidationvuelidate
albertyaz
albertyaz

Reputation: 39

can't submit form select option Vuelidate

I'm using Vuelidate version 0.7.6, for form validation, i have a selected option to validate it with submit form, if a chose a validate option or a null option i have error i wrote the same code for input text it works, but for select no:

         <div class="col-md-4">
                <label for="exampleFormControlS1">Famille:</label>
                <select
                  class="form-control form-control-sm mt-2"
                  id="exampleFormControlSelect1"
                  name="family"
                  v-model="familyId"
                  @change="onChange($event)"
                  :class="{
                    'is-invalid': $v.family.$error,
                    'is-valid': !$v.family.$invalid,
                  }"
                  ><option value="null">- -- -</option>
                  <option
                    v-for="lineItem in familyListe"
                    :key="lineItem.id"
                    :value="lineItem.id"
                  >
                    {{ lineItem.name }}</option
                  >
                </select>
                <div class="invalid-feedback">
                  <span v-if="!$v.family.required">Famille requise</span>
                </div>
              </div>


  validations: {
    family: {
      required,
    },
            }

enter image description here

Upvotes: 0

Views: 567

Answers (1)

Tolbxela
Tolbxela

Reputation: 5183

I guess you should change v-model to "family" instead of "familyId" to validate your field correctly.

 <select
        class="form-control form-control-sm mt-2"
        id="exampleFormControlSelect1"
        name="family"
        v-model="family"
        @change="onChange($event)"
        :class="{
          'is-invalid': $v.family.$error,
          'is-valid': !$v.family.$invalid,
        }"
 >...

onChange method according to Vuelidate Docs: Form submission

 methods: {
    onChange() {
        console.log("onChange!");
        if (this.$v.$invalid) {
          this.submitStatus = "ERROR";
        } else {
          this.submitStatus = "OK";
        }
      }
    }

Check the following CodeSandbox for details:

https://codesandbox.io/s/stackoverflow-69434609-vuelidate-t11qy?file=/package.json

Upvotes: 1

Related Questions