Execute onclick before input

Question

This is difficult to approach because I'm running "Custom javascript for websites 2" Chrome extension. So I can't modify the code , only I can add.

The webpage have a form which it's loaded doing an ajax request. Then, there is a button without form validation. I want to add form validation .

The default form submits the form with a onclick HTML attribute inside an input.

1- First failed approach:

document.getElementById('submit-btn').onclick = myValidation;

Result: it works the first time I press the button. But the second time, submits as default.

2- Second failed approach:

document.getElementById('submit-btn').addEventListener('click', myValidation, true);

Result: first do the default submit (onclick attribute) and then, do myValidation function. I thought what putting addEventListener true argument, I will fire first. But not.

Is there a way for do that?

Answer 1

in first case you should path reference to function NOT the function execute result

INCORRECT:

document.getElementById('submit-btn').onclick = myValidation();

CORRECT:

document.getElementById('submit-btn').onclick = myValidation;