errors message show multiple times when submit with event listener

[ziat1988]

I want to validate form inside my submit event listener, (instead of DOM load ), so what I do is:

document.getElementById("form").addEventListener("submit", (e) => {
     e.preventDefault();
    const validation = new JustValidate('#form');
    validation.addField() //...

  // if validate ok then ajax Post call here
}

When doing this, the first time I click on button submit, no errors shows even the rules has defined. After that, each time I click the button now I have the errors show on DOM, but repeated many times!

I'm not sure what I did above is correct for the library but I want to follow this pattern to be applied for my project, which is submit called with event listener as normal, then the validation would be applied after. Is it possible?

Please take a look the demonstrate for this error:
https://codesandbox.io/s/just-validate-template-forked-z2gcxb?file=/index.html

[ceciiiron]

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

[ziat1988]

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.

[horprogs]

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.