From 699f442088387ebcacc88c08b188dc5163bc9f51 Mon Sep 17 00:00:00 2001 From: EETagent Date: Fri, 3 Feb 2023 18:14:13 +0100 Subject: [PATCH] feat: validate phone number in yup directly --- .../components/textfield/TelephoneField.svelte | 6 ------ .../(authenticated)/register/+page.svelte | 18 ++++++++++++++---- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/frontend/src/lib/components/textfield/TelephoneField.svelte b/frontend/src/lib/components/textfield/TelephoneField.svelte index e8d13f1..576c23d 100644 --- a/frontend/src/lib/components/textfield/TelephoneField.svelte +++ b/frontend/src/lib/components/textfield/TelephoneField.svelte @@ -20,12 +20,6 @@ export let error: string = ''; $: error = valid ? '' : 'Zadejte platný telefon s předvolbou. Například +420 123 456 789'; - $: { - if (!error) { - error = valid ? '' : 'Zadejte platný telefon s předvolbou. Například +420 123 456 789'; - } - } - // Optional - Extended details about the parsed phone number let parsedTelInput: NormalizedTelNumber | null = null; diff --git a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte index d4d48a7..b37a10f 100644 --- a/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte +++ b/frontend/src/routes/(candidate)/(authenticated)/register/+page.svelte @@ -5,7 +5,6 @@ import { apiFillDetails } from '$lib/@api/candidate'; import Submit from '$lib/components/button/Submit.svelte'; import GdprCheckBox from '$lib/components/checkbox/GdprCheckBox.svelte'; - import SchoolBadge from '$lib/components/icons/SchoolBadge.svelte'; import SplitLayout from '$lib/components/layout/SplitLayout.svelte'; import SelectField from '$lib/components/select/SelectField.svelte'; @@ -16,7 +15,7 @@ import TextField from '$lib/components/textfield/TextField.svelte'; import type { PageData } from './$types'; import { SvelteToast, toast } from '@zerodevx/svelte-toast'; - + import parsePhoneNumber from 'libphonenumber-js'; import { createForm } from 'svelte-forms-lib'; import * as yup from 'yup'; import type { CandidateData } from '$lib/stores/candidate'; @@ -104,7 +103,15 @@ name: yup.string().required(), surname: yup.string().required(), email: yup.string().email().required(), - telephone: yup.string().required(), // already validated by the 'TelephoneField' component + telephone: yup + .string() + .required() + .test((_val) => { + if (!_val) return false; + const number = parsePhoneNumber(_val); + if (!number) return false; + return number.isValid(); + }), // already validated by the 'TelephoneField' component birthplace: yup.string().required(), birthdate: yup .string() @@ -175,7 +182,10 @@ if (context.path.includes('parents[1]')) { return true; } - return _val !== ''; + if (!_val) return false; + const number = parsePhoneNumber(_val); + if (!number) return false; + return number.isValid(); }) }) )