Chore: Add validation for contact phone field (#2105)
This commit is contained in:
parent
ce4ce3c86c
commit
98bfef026e
3 changed files with 31 additions and 8 deletions
|
@ -71,7 +71,9 @@
|
|||
},
|
||||
"PHONE_NUMBER": {
|
||||
"PLACEHOLDER": "Enter the phone number of the contact",
|
||||
"LABEL": "Phone Number"
|
||||
"LABEL": "Phone Number",
|
||||
"HELP": "Phone number should be of E.164 format eg: +1415555555 [+][country code][area code][local phone number]",
|
||||
"ERROR": "Phone number should be either empty or of E.164 format"
|
||||
},
|
||||
"LOCATION": {
|
||||
"PLACEHOLDER": "Enter the location of the contact",
|
||||
|
|
|
@ -35,12 +35,26 @@
|
|||
</label>
|
||||
</div>
|
||||
<div class="row">
|
||||
<woot-input
|
||||
<div class="medium-12 columns">
|
||||
<label :class="{ error: $v.phoneNumber.$error }">
|
||||
{{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL') }}
|
||||
<input
|
||||
v-model.trim="phoneNumber"
|
||||
class="columns"
|
||||
:label="$t('CONTACT_FORM.FORM.PHONE_NUMBER.LABEL')"
|
||||
type="text"
|
||||
:placeholder="$t('CONTACT_FORM.FORM.PHONE_NUMBER.PLACEHOLDER')"
|
||||
@input="$v.phoneNumber.$touch"
|
||||
/>
|
||||
<span v-if="$v.phoneNumber.$error" class="message">
|
||||
{{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.ERROR') }}
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
v-if="$v.phoneNumber.$error || !phoneNumber"
|
||||
class="callout small warning"
|
||||
>
|
||||
{{ $t('CONTACT_FORM.FORM.PHONE_NUMBER.HELP') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<woot-input
|
||||
v-model.trim="companyName"
|
||||
|
@ -87,6 +101,8 @@ import {
|
|||
} from 'shared/helpers/CustomErrors';
|
||||
import { required } from 'vuelidate/lib/validators';
|
||||
|
||||
import { isPhoneE164OrEmpty } from 'shared/helpers/Validators';
|
||||
|
||||
export default {
|
||||
mixins: [alertMixin],
|
||||
props: {
|
||||
|
@ -131,7 +147,9 @@ export default {
|
|||
description: {},
|
||||
email: {},
|
||||
companyName: {},
|
||||
phoneNumber: {},
|
||||
phoneNumber: {
|
||||
isPhoneE164OrEmpty,
|
||||
},
|
||||
bio: {},
|
||||
},
|
||||
|
||||
|
@ -190,6 +208,7 @@ export default {
|
|||
async handleSubmit() {
|
||||
this.resetDuplicate();
|
||||
this.$v.$touch();
|
||||
|
||||
if (this.$v.$invalid) {
|
||||
return;
|
||||
}
|
||||
|
|
2
app/javascript/shared/helpers/Validators.js
Normal file
2
app/javascript/shared/helpers/Validators.js
Normal file
|
@ -0,0 +1,2 @@
|
|||
export const isPhoneE164 = value => !!value.match(/^\+[1-9]\d{1,14}$/);
|
||||
export const isPhoneE164OrEmpty = value => isPhoneE164(value) || value === '';
|
Loading…
Reference in a new issue