I'm using onclick on a submit button to make a loading element with javascript on the page before retreiving data from an extract.
However I added a pattern on some input on the form associated with this submit button and the problem I have is that, if the pattern doesn't match (the form doesn't send wrong data, which is good) but this trigger the onclick event generating my loading element for nothing, and that could confuse users.
How can I know for sure that the information of my form has been sent allowing me to start my loading function?
Try something similar:
<button type="submit" onclick="handleSubmit(event)">Submit</button>
In your JS code:
function isFormValid() {
// Put here the logic of form validation, which return a boolean value
}
function handleSubmit(event) {
if (!isFormValid()) {
event.preventDefault();
return;
}
}