I'm facing a challenging issue that I can't seem to solve 🤔. I would really appreciate hearing your thoughts on this problem.
Here's the scenario: I have developed reusable Form and InputField components. The InputField component receives a validation prop, which is a function that determines whether the input is valid or not by returning true or an error message.
// InputField.vue
const validate = () => {
isValid.value = props.validation(inputValue.value);
};
// App.vue
<InputField
v-model="formData.firstName"
element="input"
required
name="First Name"
:validation="(val) => /^.{2,}$/.test(val) || 'Minimum 2 characters'"
/>
Now, in the Form.vue component, I have a variable called isValid. If it's false, the submit function should not work.
So here's where I'm stuck: How can I check the states of all the InputFields within the Form component (which are passed as slots) to determine if isValid is true for each input? Once I can verify that, I need to ensure all inputs are valid before submitting the form.
I'm searching for an efficient solution that will work seamlessly for multiple forms and inputs placed in different parts of the app. I'm not looking for a quick fix.
If you want to dive deeper into the issue, you can access the application through this link: https://codesandbox.io/s/muddy-sun-0ti9m. Feel free to explore and understand the problem better :)
To recap, my main objective is to verify all inputs based on their respective validation functions. Only when all inputs are valid, the Form should be allowed to submit.
Thank you all for your help!