Onclick respect required field

Question

I created an animation that appears on the screen and blocks the fields entered by the user while the request is processed, directly on submit, as below:

onclick="javascript:document.getElementById('blanket').style.display = 'block';document.getElementById('aguarde').style.display = 'block'; block();"

Appearing the image below:

It turns out that if the user does not fill in some information, the form is not sent and the warning appears due to the required, but the animation runs anyway, and to go back to page only by updating the same.

Is there any way of onClick await validation of the fields required before performing this animation?

Answer 1

In that case the onclick will be executed anyway. For this lock validation to be activated only if the criteria are met, put in the event onsubmit and take from the onclick. It could be something like:

document.getElementById('meu_form').addEventListener("submit", function(){
    document.getElementById('blanket').style.display = 'block';
    document.getElementById('aguarde').style.display = 'block'; 
    block();
});