The addeventlistener event is not listened to

Question

I don’t know if this can interfere or not, but I have 3 equal forms on the same page and 2 other scripts being called in the same way (with window.addEventListener)

HTML

<script src="../../js/mail.js"></script>
<script src="../../js/formCurso.js"></script>
<script src="../../js/whatsapp.js"></script>

<form method="POST">

  <label>Nome</label>
  <input type="text" class="form-control" name="name" id="name" placeholder="Nome">

  <label>E-mail</label>
  <input type="email" class="form-control" name="email" id="email" placeholder="E-mail">

  <label>Telefone/Celular</label>
  <input type="tel" class="form-control" name="phone" id="phone" placeholder="Telefone/Celular">

  <input type="hidden" value="Colorimetria" name="course" id="course">

  <input type="hidden" value="" name="module" id="module">

  <button type="submit" class="waves-effect waves-light cta btn-large btn-solicitar-modal pulse-hover" id="buttonPress">
   Solicitar curso
  </button>

</form>

Javascript

window.addEventListener('DOMContentLoaded', () => {

    var regexCharactere = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    var regexEmail = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    var regexTel = /(?:^\([0]?[1-9]{2}\)|^[0]?[1-9]{2}[\.-\s]?)[9]?[1-9]\d{3}[\.-\s]?\d{4}$/;
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var phone = document.getElementById('phone');
    var buttonPress = document.getElementById('buttonPress');

    /*A próxima linha não escuta o evento a ser chamado, ignorando todo o resto do código*/

    buttonPress.addEventListener('click', (e) => {
        if(!regexCharactere.test(name.value) || name.value == "" || name.value == undefined || name.value == null) {
            alert("Nome não reconhecido");
            name.focus();
            e.preventDefault();
        }

        if(!regexEmail.test(email.value) || email.value == "" || email.value == undefined || name.value == null) {
            alert("E-mail inválido");
            email.focus();
            e.preventDefault();
        }

        if(!regexTel.test(phone.value) || phone.value == "" || phone.value == undefined || phone.value == null) {
            alert("Insira um telefone correto\n(DDD) + num do telefone");
            phone.focus();
            e.preventDefault();
        }

    });


});

Answer 1

Run and see that the event is being called correctly. The difference between my code and yours is that I have not entered the initial script tags.

window.addEventListener('DOMContentLoaded', () => {

    var regexCharactere = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    var regexEmail = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
    var regexTel = /(?:^\([0]?[1-9]{2}\)|^[0]?[1-9]{2}[\.-\s]?)[9]?[1-9]\d{3}[\.-\s]?\d{4}$/;
    var name = document.getElementById('name');
    var email = document.getElementById('email');
    var phone = document.getElementById('phone');
    var buttonPress = document.getElementById('buttonPress');

    /*A próxima linha não escuta o evento a ser chamado, ignorando todo o resto do código*/

    buttonPress.addEventListener('click', (e) => {
        if(!regexCharactere.test(name.value) || name.value == "" || name.value == undefined || name.value == null) {
            alert("Nome não reconhecido");
            name.focus();
            e.preventDefault();
        }

        if(!regexEmail.test(email.value) || email.value == "" || email.value == undefined || name.value == null) {
            alert("E-mail inválido");
            email.focus();
            e.preventDefault();
        }

        if(!regexTel.test(phone.value) || phone.value == "" || phone.value == undefined || phone.value == null) {
            alert("Insira um telefone correto\n(DDD) + num do telefone");
            phone.focus();
            e.preventDefault();
        }

    });


});

<form method="POST">

  <label>Nome</label>
  <input type="text" class="form-control" name="name" id="name" placeholder="Nome">

  <label>E-mail</label>
  <input type="email" class="form-control" name="email" id="email" placeholder="E-mail">

  <label>Telefone/Celular</label>
  <input type="tel" class="form-control" name="phone" id="phone" placeholder="Telefone/Celular">

  <input type="hidden" value="Colorimetria" name="course" id="course">

  <input type="hidden" value="" name="module" id="module">

  <button type="submit" class="waves-effect waves-light cta btn-large btn-solicitar-modal pulse-hover" id="buttonPress">
   Solicitar curso
  </button>

</form>

Answer 2

Insert e.preventDefault(); right after opening the function scope. This command prevents the page from being redirected by the POST method of your form.

buttonPress.addEventListener('click', (e) => {
  e.preventDefault();   

  // restante do código
})