Why doesn't it work when sameAs is used in vuelidate?

Question

fieldName not found to vuelidate of sameAs method.

sameAs(blabla)

blabla = 'internalFormData.password', 'internalFormData.password.value', 'this.internalFormData.password', 'this.internalFormData.password.value', 'password', 'this.password', 'password.value'

-----------script----------
data () {
  return {
     internalFormData: {
        password: '',
        repassword: ''
      }
   }
},


validations: {
      password: {
        value: {
          required,
          minLength: minLength(8)
        }
      },
      repassword: {
        value: {
          required,
          minLength: minLength(8),
          sameAs: sameAs('internalFormData.password')
        }
      }
    }
  },



---------------template--------------
<error
   v-if="!$v.internalFormData.repassword.value.sameAs"
>
  비밀번호가 일치하지 않습니다.
<error>

The error won't go away.

score 6 · Answer 1 · answered Dec 14 '22 at 10:11

Simple example with composition api:

import { useVuelidate } from '@vuelidate/core'
import { email, required, sameAs } from '@vuelidate/validators'

const form = {
    email: '',
    confirm_email: '',
}
const rules = {
    email: { required, email },
    confirm_email: { required, sameAs(computed(()=> form.email))) },
}
const v$ = useVuelidate(rules, form)

score 5 · Answer 2 · answered Feb 17 '19 at 10:15

5

Your validations structure should mirror object(s) in data, thus it should be:

validations: {
  internalFormData: {
    password: {
      required,
      minLength: minLength(8)
    },
    repassword: {
      required,
      minLength: minLength(8),
      sameAs: sameAs('internalFormData.password')
    }
  }
}

answered Feb 17 '19 at 10:15

Styx

9,863
8
43
53

Replace sameAs: sameAs('internalFormData.password') with sameAs: sameAs(internalFormData.password) . I mean remove the quotes – Destiny Maina May 11 '23 at 08:01
@DestinyMaina Won't work without quotes. It should be a name (in dot-notation) of a target field. Without quotes it will be undefined reference. – Styx May 11 '23 at 12:18

score 4 · Answer 3 · answered Mar 13 '20 at 14:36

You need to point out your nested attribute with a function. Like this :

data(){return {
 password :{
  new: '',
  newRepeated:''
 }
}},    
validations : {
 password: {
  new : {required},
  newRepeated : {
   required,
   sameAs : sameAs( function(){return this.password.new} )
  }
 }
}

I would also suggest you to take a look at this closed issue. https://github.com/vuelidate/vuelidate/issues/252

score 4 · Answer 4 · answered May 10 '22 at 09:41

Example for vue3:

validations () {
    return {
        admin: { 
            type: {
                required
            },
            email: {
                required,
                email
            },
            password: { 
                required, 
                minLength: minLength(10) 
            },
            confirmPassword: { 
                required, 
                sameAs: sameAs(this.admin.password)
            }
        }
    }
}

score 1 · Answer 5 · answered Aug 10 '22 at 17:21

Replace this line:

sameAs: sameAs('internalFormData.password')

With

sameAs: sameAs(this.internalFormData.password)

The parameter should not be a string but rather the actual attribute using 'this' I am not sure whether the validations not being identical to the data internalFormData will affect how it works bu I suggest you ensure they match to fit as shown below:

  validations: {
  internalFormData: {
    password: {
      required,
      minLength: minLength(8)
    },
    repassword: {
      required,
      minLength: minLength(8),
      sameAs: sameAs(this.internalFormData.password)
    }
  }
}

score 0 · Answer 6 · edited Dec 18 '22 at 14:09

0

You must be use .value

sameAs: sameAs('internalFormData.value.password')

edited Dec 18 '22 at 14:09

dippas

58,591
15
114
126

answered Dec 16 '22 at 10:29

Hakan Özdemir

1

Instead of simply providing the answer directly, try writing a detailed comment that explains the solution, as long as the explanation is not too lengthy. @Hakan Özdemir . – DSDmark Dec 21 '22 at 15:30

score 0 · Answer 7 · answered Feb 24 '23 at 21:10

try this solution :

<template>
       <div>
            <div>
                <label>Current Password:</label>
                <input type="password" v-model="updatePassword.CurrentPassword"/>
        
                <div v-if="updatePasswordValidate.CurrentPassword.$errors.length">
                    {{ updatePasswordValidate.CurrentPassword.$errors[0].$message }}
                </div>
            </div>
            <div class="mb-4">
                <label>New Password:</label>
                <input type="password" v-model="newPassword"/>
        
                <div v-if="updatePasswordValidate.NewPassword.$errors.length">
                    {{ updatePasswordValidate.NewPassword.$errors[0].$message }}
                </div>
            </div>
            <div>
                <label>Re-type New Password:</label>
           <input type="password" v-model="updatePasswordValidate.retypePassword.$model"/>
        
                <div v-if="updatePasswordValidate.retypePassword.$errors.length">
                    {{ updatePasswordValidate.retypePassword.$errors[0].$message }}
                </div>
            </div>

            <div>
                <button
                    id="updatePassBtn"
                    @click="updateUserPassword"
                    type="button">Change Password</button>
            </div>
        </div>
 </template>


<script>
import useVuelidate from "@vuelidate/core";
import {required, sameAs, minLength} from "@vuelidate/validators";
export default {
    data() {
        return {
            updatePasswordValidate: null,
            newPassword: "",
            updatePassword: {
                CurrentPassword: null,
                NewPassword: null,
            },
        };
    },
    components: {BaseAlert},
    watch: {
        newPassword(newV) {
            this.updatePassword.NewPassword = newV;
            this.loadValidation();
        },
    },
    computed: {
        rulesUpdatePassword() {
            return {
                CurrentPassword: {
                    required,
                    minLength: minLength(8),
                },
                NewPassword: {
                    required,
                    minLength: minLength(8),
                },
                retypePassword: {
                    required,
                    minLength: minLength(8),
                    sameAs: sameAs(this.updatePassword.NewPassword, "New Password"),
                },
            };
        },
    },
    props: {
        token: {
            required: true,
        },
    },
    methods: {
        updateUserPassword() {
          console.log('handle update button')   
        },
        loadValidation() {
            this.updatePasswordValidate = useVuelidate(
                this.rulesUpdatePassword,
                this.updatePassword
            );
        },
    },
    created() {
        this.loadValidation();
    },
};
</script>

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Mar 02 '23 at 18:54

score 0 · Answer 8 · answered Jul 22 '23 at 00:23

0

I found that the sameAs will only work if your validation obj is a function.

validations() {
  //your validations
}

instead of:

validations: {
  //your validations
}

answered Jul 22 '23 at 00:23

sultan

1

Why doesn't it work when sameAs is used in vuelidate?

8 Answers8