como pegar o return da validacao com addEventlistener?

[Coder Ninja 0]

:ninja: Ola galera,

gostaria de uma dica/auxilio de boas praticas, quero fazer com Javascript puro sem JQuery

o seguite.

 

Tenho uma função chamada validacao() :!:

function validacao(){
  if(document.formulario.nome_curso.value == ""){
		  alert("Por favor, preencha o nome do curso.");
		  document.formulario.nome_curso.focus();
		  return false;
	  }
  if(document.formulario.email.value == ""){
		  alert("Por favor, preecha o e-mail.");
		  document.formulario.email.focus();
		  return false;
	  }
  if((document.formulario.curso.value === "lato_sensu" || document.formulario.curso.value === "outros") && 
  ((document.formulario.data1.value == "" || document.formulario.data2.value == "") || 
  (document.formulario.data1.value == "" && document.formulario.data2.value == ""))){
	  
	 alert("Por favor, preecha as datas de inicio e termino deste curso.");	 
	 
	 return false; 
	 }
 
 
  if(document.formulario.curso.value == ""){
	  	alert("Por favor, preecha o tipo de curso.");
		return false; 
	 }
  if(document.formulario.cidade.value == ""){
	 	alert("Por favor, preecha a cidade.");
		document.formulario.cidade.focus();
	 	return false;
	 }
  if(document.formulario.estado.value == ""){
	  alert("Por favor, selecione um estado.");
	  return false;
	  }
  if(document.formulario.valor.value == ""){
	  alert("Por favor, preecha um tipo de oferta.");
	  return false;
	  }
	  
  if (document.getElementById("arquivo").value != "") {
      Caminho = document.getElementById("arquivo").value;
      Caminho = Caminho.replace(/\\/g, "/");
      var Arquivo = Caminho.substring(Caminho.lastIndexOf('/') + 1);
      var Extensao = Arquivo.substring(Arquivo.lastIndexOf('.') + 1);
      //alert(Extensao);
      if (Extensao != "JPG" && Extensao != "jpg" && Extensao != "pdf" && Extensao != "PDF" && Extensao != "jpeg" && Extensao != "JPEG") {
          alert("Por favor, selecione um arquivo no formato jpg, pdf ou jpeg.");
          document.getElementById("arquivo").focus();
          return false;

      }

  }

  
  return true;
}
document.getElementById('validacao').addEventListener('submit', validacao);
}

no final dela ela pega o id do elemento form que se chama validacao e queria que ela fizesse o return false ou true mas não sei como implementar isto :huh:

 

 

tipo com más praticas seria simplesmente fazer isto onSubmit="return validacao()" :!:

 

mas pelo certo o que eu devo fazer para funcionar? :ninja:

 

Agradeço desde de já toda a ajuda :worship:

[William Bruno 1501]

Na verdade, a forma correta é event.preventDefault(), quando vc quiser o "return false"

 

function validacao(event){

    event.preventDefault(); //quando quiser o return false;
}

[Coder Ninja 0]

Obrigado :joia:

 

 

Eu resolvi desta maneira, chamei no onload do documento para que a a função ficasse pronta ao disparo do submit

 

e codifiquei assim: :ninja:

document.getElementById('validacao').addEventListener('submit', function validacao(event) {
                val = document.getElementById('validacao');
                if (val.nome_curso.value === "" &&
                    val.email.value === "" &&
                    val.curso.value === "" &&
                    val.data1.value === "" &&
                    val.data2.value === "" &&
                    val.cidade.value === "" &&
                    val.estado.value === "" &&
                    val.valor.value === "") {

                    alert(" Por favor, preecha os campos antes de enviar o formulario.");
                    event.preventDefault();

                } else {


                    if (document.getElementById('validacao').nome_curso.value == "") {
                        alert("Por favor, preencha o nome do curso.");
                        document.getElementById('validacao').nome_curso.focus();
                        event.preventDefault();
                    }
                    else if (document.getElementById('validacao').email.value == "") {
                        alert("Por favor, preecha o e-mail.");
                        document.getElementById('validacao').email.focus();
                        event.preventDefault();
                    }
                    else if ((document.getElementById('validacao').curso.value === "lato_sensu" 
					|| document.getElementById('validacao').curso.value === "outros") &&
                    ((document.getElementById('validacao').data1.value == "" 
					|| document.getElementById('validacao').data2.value == "") ||
                    (document.getElementById('validacao').data1.value == "" 
					&& document.getElementById('validacao').data2.value == ""))) {

                        alert("Por favor, preecha as datas de inicio e termino deste curso.");

                        if (document.getElementById('validacao').data1.value === "") {
                            document.getElementById('validacao').data1.focus();
                        } else {
                            document.getElementById('validacao').data2.focus();

                        }
                        event.preventDefault();
                    }


                    else if (document.getElementById('validacao').curso.value == "") {
                        alert("Por favor, preecha o tipo de curso.");
                        event.preventDefault();
                    }
                    else if (document.getElementById('validacao').cidade.value == "") {
                        alert("Por favor, preecha a cidade.");
                        document.getElementById('validacao').cidade.focus();
                        event.preventDefault();
                    }
                    else if (document.getElementById('validacao').estado.value == "") {
                        alert("Por favor, selecione um estado.");
                        event.preventDefault();
                    }
                    else if (document.getElementById('validacao').valor.value == "") {
                        alert("Por favor, preecha um tipo de oferta.");
                        event.preventDefault();
                    }
                }
                if (document.getElementById("arquivo").value != "") {
                    Caminho = document.getElementById("arquivo").value;
                    Caminho = Caminho.replace(/\\/g, "/");
                    var Arquivo = Caminho.substring(Caminho.lastIndexOf('/') + 1);
                    var Extensao = Arquivo.substring(Arquivo.lastIndexOf('.') + 1);
                    //alert(Extensao);
                    if (Extensao != "JPG" && Extensao != "jpg" && Extensao != "pdf" && Extensao != "PDF" && Extensao != "jpeg" && Extensao != "JPEG") {
                        alert("Por favor, selecione um arquivo no formato jpg, pdf ou jpeg.");
                        document.getElementById("arquivo").focus();
                        event.preventDefault();

                    }

                }


                return true;
            });





        });

        

Uma curiosidade o objeto :ninja: event? o que ele é ?

Eu dei uma caçada na internet mas não encontrei algo concreto sobre ele.

 

Ele manipular qualquer evento que acontece no DOM? tipo onclick, dblclick, submit e etc?

:worship: Obrigado mais uma vez, este forum é muito bom! :lol:

[William Bruno 1501]

O event é o evento em si. Ele não "manipula", ele é mais um "retrato" do evento em si(o próprio).

 

Ele possui outras propriedades bem interessantes como .target, .stopPropagation()... :lol: