Javascript Evento Script não aciona

[devprogramador]

Estou com um formulário HTML e um código JavaScript, entretanto o JavaScript não quer escutar o evento de click... Já fiz o console.log('') para pegar os valores do id, para verificar se realmente estão sendo pegos e estão normalmente, mas quando eu adiciono um evento ao botão ele ignora.

Qual o erro?

 

HTML

<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');

  console.log(buttonPress); //Aqui ele retorna normalmente o botão que está no HTML

  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();

    }



  });

});

 

[GabrielSennaMs]

@devprogramador Bom o problema está no seu botão(button), você está adicionando um evento de click nele porém, ele é um botão(button) tipo(type) enviar(submit) ele vai executar o evento de submit do form.

 

Para impedir o evento você tentou usar o preventDefault() porém, o evento é do form e não do botão(button), em vez de adicionar o evento de click no botão você pode adicionar o evento de submit no form.

 

Exemplo:

<form id="fromid" method="POST"><!-- Eu coloquei um id no form -->
		<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">Solicitar curso</button>
	</form>
	<script type="text/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 formulario = document.getElementById('fromid'); // Aqui eu seleciono o form, em vez do botão.
		  	formulario.addEventListener('submit', (e) => { // Aqui eu adicionao o evento de submit no form.
			  	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();
			    }	    
			});
		});
	</script>

Recomendo você a trabalhar melhor no seu formulário, existe maneiras melhores de selecionar os elementos dentro de um form, e maneiras melhores e mais simples de filtra uma string

[devprogramador]

Olá @GabrielSennaMs,

 

Então, vou tentar melhorar meu formulário... Em questões do evento selecionado eu já usei isso para outros, e nunca deu problema, inclusive eu tenho outros 2 scripts executando +/- da forma que montei esse...

 

Queria perguntar, eu dei um exemplo claro desse formulário, acho que foi possível entender, mas e quando se trata de mais de um formulário na página? No meu arquivo html eu possuo 3 formulários em uma única página, eu teria que colocar ids diferentes em todos ou é melhor selecionar pela classe?

 

Obrigado pela ajuda! valeu 

[GabrielSennaMs]

@devprogramador O seu script pode funcionar de boa, é só você trocar o tipo(type) do botão de enviar(submit) para botão(button).

Em relação a seleção do formulário e melhor você trabalhar com ID porque o ID é único a class não é, você também pode trabalhar com o nome(name).

Exemplo:

<form name="form_login" action="login.php" onsubmit="return logar()" method="post">
	<input type="text" name="login" placeholder="Login">
	<input type="password" name="senha" placeholder="Senha">
	<button type="submit">Logar</button>
</form>
<script>
	function logar(){
		let form = document.forms["form_login"],
		    login = form["login"].value,
		    senha = form["senha"].value
		console.log(login, senha)
	    return false
	}
</script>