<button type="submit" :disabled=" (user.password && !$v.user.password.valid) || (user.confirmPassword && !$v.user.confirmPassword.sameAsPassword)">sda </button>
With length i need to disable, untill user enterd equal characters in both fields. i need to check both field values.
Can i do this by using length?? if yes how can i check with above code.
Issue is at present it is checking only for, If entered password is matched with first character in confirm password field, it is proceeding.
Advertisement
Answer
I don’t know if i understood correctly but i think you can simply add && user.password.length>8
or since you are using vuelidate you can add this validation:
https://codepen.io/sibellek/pen/oNBPVbN
<div id="app"> <input v-model="user.confirmPassword" id="confirmPassword" name="confirmPassword" placeholder="Confirm password" autocomplete="off" :disabled="user.password.length < 8" @change="disabledSubmit" /> <div class="error-messages-pass" > <input v-model="user.password" id="password" name="password" value="" placeholder="Enter new password" autocomplete="off" @change="disabledSubmit" /> </div> <button type="submit" :disabled="disableButton">sda </button> </div> new Vue({ el: "#app", data: { user: { password: "", confirmPassword: "", }, disableButton: false, }, validations: { user: { password: { valid: function (value) { const containsUppercase = /[A-Z]/.test(value) const containsLowercase = /[a-z]/.test(value) const containsNumber = /[0-9]/.test(value) const containsSpecial = /[#?!@$%^&*-]/.test(value) return containsUppercase && containsLowercase && containsNumber && containsSpecial }, required, minLength: minLength(8), maxLength: maxLength(20) }, confirmPassword: { required, sameAsPassword: (value, vm) => value === vm.password.substring(0, value.length) }, }, }, methods: { disabledSubmit() { this.$v.user.$touch(); this.disableButton = this.user.password.length<8 || this.$v.user.password.$error || this.user.password!==this.user.confirmPassword; } }, mounted() { this.disabledSubmit(); } })
and that way you can keep your code the same way