In the form, there is a field for the phone prefix and another one for the actual phone number. The validation needs to be dynamic, with the minimum length calculated using the formula 7 - phoneprefix.length and the maximum length as 15 - phoneprefix.length. I am struggling to implement this dynamically, even after trying various methods and approaches. Any help would be greatly appreciated. Here is my code:
<template v-if="currentStep === 'phone'">
<div class="q8-form-row-text">
<span class="second" v-t="{path:'requirement_phone'}"></span>
</div>
<div class="q8-form-row q8-form-row_phone-group">
<CustomSelectComponent
v-if="country"
@country="onPhonePrefixChange"
:options="countries"
v-model="country"
class="phonePrefix"
></CustomSelectComponent>
<input v-model="phone" class="q8-form__input q8-form__input-phone" :placeholder="$t('phone')"
name="phone" required="required" pattern="[0-9٠-٩]+" :minlength="getPhoneLengthValidation('min')" type="tel"
:maxlength="getPhoneLengthValidation('max')" ref="phone" @blur="$v.phone.$touch()"/>
<span v-if="$v.phone.$error" class="q8-form__input-error" v-t="{path: 'error.phoneNumberError'}"/>
</div>
<div class="q8-form-row">
<button type="submit" value="submit" class="q8-form__submit q8-form__submit__yellow q8-form__submit__yellow-gradient"
:class="{
'q8-form__submit_next': submitButtonType === 'next'
}"
v-t="{path: submitButtonType}" @click="handleSubmitButtonClick()" :disabled="isSubmitButtonDisabled()"></button>
</div>
</template>
Description of Logic:
public getPhoneLengthValidation(validationOption: 'min' | 'max'): number {
const size = validationOption === 'max' ? 15 : 7;
return size - this.phonePrefix.length;
}
Validations in Vue Template:
validations: {
fullName: {
required,
minLength: minLength(2),
},
email: {
required,
email,
minLength: minLength(this.minValue),
},
phone: {
required,
numeric,
},
PrivacyPolicy: {
checked: ( (value) => value === true),
},
},