i am new to vue3 and composition apis.
there is problem with validating a simple form.
i am trying to stop form submission if form is not valid or not touched as it is vaild by default if inputs not touched.
login.vue
<form @submit="onSubmit">
<div class="form-group">
<input
name="email"
type="text"
v-model="email"
/>
<span>{{ emailError }}</span>
</div>
<div class="form-group">
<input
name="password"
type="password"
v-model="password"
/>
<span>{{ passwordError }}</span>
</div>
<div class="login-buttons">
<button
type="submit"
>
{{ $t("login.login") }}
</button>
</div>
</form>
login.js
<script>
import { useForm, useField,useIsFormValid } from "vee-validate";
import * as yup from "yup";
export default {
name: "LoginPage",
setup() {
const {
errors,
handleSubmit,
validate,
} = useForm();
// Define a validation schema
const schema = yup.object({
email: yup
.string()
.required()
.email(),
password: yup
.string()
.required()
.min(8),
});
// Create a form context with the validation schema
useForm({
validationSchema: schema,
});
// No need to define rules for fields
const { value: email, errorMessage: emailError } = useField(
"email"
);
const { value: password, errorMessage: passwordError } = useField(
"password"
);
const onSubmit = handleSubmit(async () => {
const { valid, errors } = await validate();
if (valid.value === false) {
return;
} else {
const response = await http.post(APIs.login, data);
}
});
return {
email,
emailError,
password,
passwordError,
onSubmit
};
},
};
</script>
in handelSubmit function if (vaild.value === false) it should return and stop the logic but always the value for vaild is true so it continues the HTTP calling for the api.
only wan't to stop sending data to the if the form is invaild using composition apis
question from:
https://stackoverflow.com/questions/65875580/how-to-stop-form-submitting-if-form-is-invalid-in-vue3-cli-compostion-apis-in-ve 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…