Javascript script is not running

Question

I have the following problem...

I have this code in JS:

window.addEventListener('DOMContentLoaded', function(){

    const regexCharactere = /<li>.[^<* ]+/;
    const 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])?/;;
    const nome = document.getElementsByClassName('nome');
    const email = document.getElementsByClassName('email');
    const buttonForm = document.getElementsByClassName('buttonForm');
    buttonForm.addEventListener('click', (e) => {
        alert("testando");
        if(!regexEmail.test(email.value)  {

            alert('Formato do e-mail inválido');
            email.focus();
            e.preventDefault();

        }
        if(!regexCharactere.test(nome.value) {

            alert('Nome inválido');
            nome.focus();
            e.preventDefault();

        } 

    });
});

Structure HTML

<form method="POST" action="#">

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

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

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

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

When I try to inject it into my page no error appears from script, but does not perform as I expected.

I’ve already done some tests:

• I added the window initially to load the script
• I changed some fields of my HTML and JS, but still no success
• I tried to apply a alert (as shown in the script) to see if it captures, but without success as well.
• I changed in the buttonForm.addEventListener('click', (e) => { /// } for buttonForm.addEventListener('submit', (e) => { /// } but it didn’t work either

What’s wrong with mine script?

Edit: In case I haven’t been clear enough, I’ll make the changes.

Answer 1

There are many errors in your script. You’re probably not seeing them on the console because the form is being submitted quickly in time for you not to see the errors shown on the console, as the page undergoes a quick refresh to the # in the action of form.

Mistakes:

The fields "name" and "email" do not have class, only name and id, soon the document.getElementsByClassName becomes invalid. You could take the value of these fields or with document.getElementsByName('name_do_campo')[0] or document.getElementById('id_do_campo').

In the case of document.getElementsByName the index is required [0] because this method returns a nodelist (an array). Already the document.getElementById no index needed because it only takes a single element (see that the method name is in the singular).

The button submit has a class and can be captured with document.getElementsByClassName('buttonForm')[0].

Another error is the regex where the bounding bars have to escape / in the middle of expression:

/[a-z0-9!#$%&'*+\/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+\/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/;
                ↑                                 ↑

Another mistake is that the parentheses of if's:

if(!regexEmail.test(email.value)) {
                                ↑

and

if(!regexCharactere.test(nome.value)) {
                                    ↑