Form Validation Fix
User
<script>
import { ref,shallowRef,inject } from 'vue';
import Google from '@/assets/images/auth/social-google.svg';
import {signInWithGoogle, signInWithGithub} from '@/firebase';
import { useForm, useField } from 'vee-validate'
import { useAuthStore } from '@/stores/auth';
import { useRouter } from 'vue-router';
import publicApi from '@/publicApi';
import {useLoadingStore} from '@/stores/loading';
const loadingStore = useLoadingStore();
const authStore = useAuthStore();
const router = useRouter();
const apiUrl = inject('apiUrl');
const showPassword = ref(false);
const alertMessage=ref("");
const alertColor=ref("");
const checkbox = ref(false);
const show1 = ref(false);
const password = ref('');
const email = ref('');
const Regform = ref();
const firstname = ref('');
const lastname = ref('');
const passwordRules = ref([
(v: string) => !!v || 'Password is required',
(v: string) => (v && v.length <= 10) || 'Password must be less than 10 characters'
]);
const emailRules = ref([(v: string) => !!v || 'E-mail is required', (v: string) => /.+@.+..+/.test(v) || 'E-mail must be valid']);
const submit = async () => {
loadingStore.setLoading(true);
alertMessage.value = "";
alertColor.value = "";
try {
const response = await publicApi.post(`${apiUrl}/register`, {
name: `${firstname.value} ${lastname.value}`,
email: email.value,
password: password.value
});
console.log(response);
if (response.data.success) {
alertMessage.value = "Registration successful!";
alertColor.value = 'success';
localStorage.setItem("tempEmail", email.value);
router.push('/verify-otp')
} else {
console.log(response.data);
alertMessage.value = response.data.message;
alertColor.value = 'error';
console.error("Registration failed:", response.data.message);
}
} catch (error:any) {
console.log(error);
alertMessage.value =error.response?.data.message;
alertColor.value = 'error';
console.error("Error during registration:", error.response?.data.message || error.message);
} finally {
loadingStore.setLoading(false);
}
}
const getFirebaseToken = async (provider:string) => {
try {
// Sign in with Google or GitHub
const result = provider === "google" ? await signInWithGoogle() : await signInWithGithub();
//console.log(result);
// Get Firebase ID token
const idToken = await result.user.getIdToken();
console.log(result.user.displayName, result.user.email, result.user.photoURL, result.user.uid);
const userData = {
name: result.user.displayName,
email: result.user.email,
avatar: result.user.photoURL,
firebase_uid: result.user.uid,
id_token: idToken,
};
loadingStore.setLoading(true);
const response = await publicApi.post(`${apiUrl}/firebase-login`, {
name: result.user.displayName,
email: result.user.email,
avatar: result.user.photoURL,
firebase_uid: result.user.uid,
id_token: idToken,
});
console.log(result.user.displayName);
console.log(response);
if (response.data.success) {
alertMessage.value = "Login successful!";
alertColor.value = 'success';
authStore.setUser(response.data.user, response.data.token);
router.push('/dashboard');
} else {
console.log(response.data);
alertMessage.value = response.data.message;
alertColor.value = 'error';
console.error("Login failed:", response.data.message);
}
} catch (error: any) {
console.log("Error getting Firebase Token:", error);
alertMessage.value = error.response?.data.message;
alertColor.value = 'error';
console.error("Error during login:", error.response?.data.message || error.message);
} finally{
loadingStore.setLoading(false);
}
};
</script>Sign up with Google
OR
Sign up with Email address
Terms and Condition
Sign Up
Already have an account?
<style>
.custom-devider {
border-color: rgba(0, 0, 0, 0.08) !important;
}
.googleBtn {
border-color: rgba(0, 0, 0, 0.08);
margin: 30px 0 20px 0;
}
.outlinedInput .v-field {
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: none;
}
.orbtn {
padding: 2px 40px;
border-color: rgba(0, 0, 0, 0.08);
margin: 20px 15px;
}
.pwdInput {
position: relative;
.v-input__append {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
}
</style>when click sign up then it shows error in red if field are blank but still process further
Assistant
It sounds like your form is allowing submission to proceed even when validation fails, and you want to **prevent the form submission unless all fields are valid**.
You're using Vuetify's “ and some custom validation rules, but it seems you're **not checking if the form is valid before calling your `submit()` logic**.
—
### ✅ Solution:
You need to **check the form validity before submitting** using Vuetify's `validate()` method like this:
Update your `submit` method:
const submit = async () => {
const { valid } = await Regform.value.validate();
if (!valid) return; // Stop submission if the form is invalid
loadingStore.setLoading(true);
alertMessage.value = "";
alertColor.value = "";
try {
const response = await publicApi.post(`${apiUrl}/register`, {
name: `${firstname.value} ${lastname.value}`,
email: email.value,
password: password.value,
});
if (response.data.success) {
alertMessage.value = "Registration successful!";
alertColor.value = 'success';
localStorage.setItem("tempEmail", email.value);
router.push('/verify-otp');
} else {
alertMessage.value = response.data.message;
alertColor.value = 'error';
}
} catch (error: any) {
alertMessage.value = error.response?.data.message;
alertColor.value = 'error';
} finally {
loadingStore.setLoading(false);
}
};—
### 📌 Why this works:
Vuetify’s “ provides a `.validate()` method that returns an object like `{ valid: boolean }`. You need to call it and check if the form is valid before continuing with the API request.
—
Let me know if you want this form to show toast/snackbar messages too!