diff --git a/src/components/InputFields/BaseInput.vue b/src/components/InputFields/BaseInput.vue index 28f6f3e8b7be448314cbf1cf5e26a3846f261d71..22ed03466408636bb262bb56fe77aa63f914b6ac 100644 --- a/src/components/InputFields/BaseInput.vue +++ b/src/components/InputFields/BaseInput.vue @@ -29,6 +29,10 @@ const props = defineProps({ min: { type: String, required: false + }, + pattern: { + type: String, + default: null } }); @@ -47,6 +51,7 @@ const onInputEvent = (event: any) => { :placeholder="props.placeholder" :id="inputId" required :min="min" + :pattern="pattern" /> <div v-if="props.isValid" class="invalid-feedback">Invalid {{ label }}</div> <div v-else class="valid-feedback">Valid {{ label }}</div> diff --git a/src/components/Login/LoginForm.vue b/src/components/Login/LoginForm.vue index 2f0a5f71cd5816740a9a63b32474d8bd23970606..2354d6e53c8243f3309785028a1c0aec55b8dfd8 100644 --- a/src/components/Login/LoginForm.vue +++ b/src/components/Login/LoginForm.vue @@ -62,7 +62,7 @@ const handleSubmit = async () => { <form ref="formRef" id="loginForm" @submit.prevent="handleSubmit" novalidate> <BaseInput :model-value="emailRef" @input-change-event="handleEmailInputEvent" id="emailInput" input-id="email" type="email" label="Email" placeholder="Enter your email" /> - <BaseInput :model-value="passwordRef" @input-change-event="handlePasswordInputEvent" id="passwordInput" + <BaseInput pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{4,16}" :model-value="passwordRef" @input-change-event="handlePasswordInputEvent" id="passwordInput" input-id="password" type="password" label="Password" placeholder="Enter password" /> <p class="text-danger">{{ errorMsg }}</p> <button1 id="confirmButton" type="submit" @click="handleSubmit" button-text="Login"></button1> diff --git a/src/components/SignUp/SignUpForm.vue b/src/components/SignUp/SignUpForm.vue index 5ee23675400de39b1a220605900d3a31729fcba4..b085f6ee59b1b3d38c777f8b041fa9d1b76013d6 100644 --- a/src/components/SignUp/SignUpForm.vue +++ b/src/components/SignUp/SignUpForm.vue @@ -33,6 +33,14 @@ const handleConfirmPasswordInputEvent = (newValue: any) => { } const handleSubmit = () => { + const form = formRef.value; + + // Check if the form is valid + if (form.checkValidity()) { + // Form is valid, submit the form or perform other actions + console.log('Form is valid'); + } + formRef.value.classList.add("was-validated") }