Check directly if all inputs in the form are valid

[Christoph Gahmann]

Hello. When I want to check the form for validation, there is only one method onSuccess. But this only works if I have already clicked the submit button. What if the submit button is disabled and it is only enabled when the form is valid? I have not found a function for this.

Like this:

const submitBtn = document.querySelector('button[type="submit"]');

if (validateForm.valid()) {
    submitBtn.removeAttribute('disabled');
} else {
    submitBtn.setAttribute('disabled', '');
}

[Georgii Perepecho]

Hi! I'd suggest not to disable the submit button, otherwise user won't see the errors and it will be unclear for users what they should fix in the form.
For now we don't have this feature, I can look into this.

[Christoph Gahmann]

But the user can see the error messages directly when he starts the input. For example here: https://jsfiddle.net/srx06ue4/

[Georgii Perepecho]

yes, but onSubmit and onFail triggered only when user submits the form or when you call revalidate() method.

And the library doesn't trigger validation before user inputs something. I mean errors shown when you start typing.

[Christoph Gahmann]

Yes, exactly. That's what I meant. I had only written that again because you meant: "otherwise user won't see the errors and it will be unclear for users what they should fix in the form". Because the user can see the error messages.

[Tom Atanasov]

@horprogs here's a different use case of having a method which validates the whole form on user input, without the need of clicking the submit button OR ENTER to see the errors.

Lets say we have this HTML structure:

<form id="post">
    <div class="input-container">
        <label for="subject">Subject</label>
        <input name="subject" id="subject">
        <!-- Place for the error message -->
    </div>
    <div class="input-container">
        <label for="content">Content</label>
        <input name="content" id="content">
        <!-- Place for the error message -->
    </div>
    <div class="submit-container">
        <button type="submit">
            Submit
        </button>
    </div>
</form>

When we start typing in some of the <input> fields, we want to trigger the validation method on this field because our page design requires to make style changes of the .input-container content where we've placed the <label> and <input> elements.

For example, adding an .error class to the .input-container will be enough to change the styles of the child elements there. But when the field is valid (take in mind - without clicking the submit button or ENTER) and there's no errors remaining, we need to remove the .error class from the .input-container.

That's why we need to have a method which auto-toggles the field validation state in real time. Also, a better support of adding an .error class to a parent element, not only on the <input>. It's a must have feature imo.

[Georgii Perepecho]

Thanks guys, get it. I'll look into this.

[Georgii Perepecho]

added the onValidate callback https://just-validate.dev/docs/methods/onValidate

[Christoph Gahmann]

Thank you! It works.