The drawback lies in the validation of the fields when moving between them, where the blur event triggers the validation and, if incorrect, clears the field and brings it back into focus. To ensure that a field is required, vee-validate is used with a 'required' rule; However, a problem arises when the user fills out a field and quickly presses the accept button, since the WS validation is slower and the field is not cleared in time, allowing the form to be considered valid even if the fields are incorrect .
Consideration has been given to adding a delay to the accept button to allow blur validation to complete, but this solution is not optimal. The problem is aggravated in long forms, where some fields must be validated when entered, through web services that consult the database. The goal is to minimize the number of calls.
A possible solution would be to maintain a state variable, such as 'isValidate', in the component to activate or deactivate the button based on its state. However, this does not work correctly when the user fills in the last field, as the blur event does not fire until they move to another input, which affects the user experience.
Does anyone have any suggestions or have faced a similar situation?