errors message show multiple times when submit with event listener about just-validate HOT 3 CLOSED

Base on your code, everytime you "submit" the form, you create a new instance of JustValidate. Initiate the validator outside the addEventListener function then call revalidate to trigger the validation manually

const validation = new JustValidate('#form');
validation.addField();

document.getElementById("form").addEventListener("submit", (e) => {
    e.preventDefault();
    validation.revalidate().then(isValid => {
        if (isValid) {
          // if validate ok then ajax Post call here
        }
    }
});
// If you want to use async/await:
document.getElementById("form").addEventListener("submit", async (e) => {
    e.preventDefault();
    const isValid  = await validation.revalidate()
    if (isValid) {
        // if validate ok then ajax Post call here
    }
});

Sandbox Sample
revalidate() method

from just-validate.

Hi,
Thank you for pointing out.
Yes it does the trick, but still not really what I want. Because the instantiate is still live outside the function. The reason I ask for it because I always re-render the form after submit, only the form, not the whole page. So this mean I have to recall the instantiation new JustValidate('#form'); after submit. It's ok but I just think it would great if we can encapsulate everything in one pot. But it seems to me this is the logic by design. So feel free to close this one. Thanks again.

from just-validate.

Hey yeah, as @ceciiiron correctly pointed out, calling new JustValidate creates a new instance and it adds a listener to a form submit, so I'd say it's not supposed to use for your case.
Usually it's not an issue to keep the instance in the running context, you could explain in more details why you don't want to keep the instance after submit and probably we could help to figure out the solution.

from just-validate.