Jump to content
  • 0
lucashenrique175

[Resolvido] Alert JavaScript

Question

Olá pessoal,

Estou com um problema... Sou muito leigo em javascript e comecei a estudar tem pouco tempo.

Estava querendo substituir os alerts por uma janela modal mais bonita. Consegui achar um código na internet que auxilia muito nisso. Peguei ele e estou tentando aplicar no meu script.

Nesse código ao ser clicado em um link ou um botão, ele pega a class ou id dos mesmos e abre a janela, sendo uma janela simples de alerta ou uma janela de confirmação só que estilizadas.

No meu código estou tentando validar os dados enviados do formulário e, caso o campo não for preenchido, ao invés de mostrar o convencional alert, estou tentando implementar essa janela modal.

 

Eu até consegui fazer que ela apareça caso o campo não esteja preenchido. O problema é que tenho que se dou um clique nada acontece, mas quando dou o segundo clique ela aparece normalmente, dai em diante ela funciona normalmente, mas se atualizo a pagina tenho que dar dois cliques para que funcione.

E se preencho o nome ela também aparece.

 

Se alguém souber e poder me ajudar ficaria grato.

 

<!DOCTYPE html>
<html lang="pt-br">
	<head>		
		<title>Alert - Testes</title>

		<meta charset="UTF-8" />
		<meta name="viewport" content="widht=device-widht, initial-scale=1">		
		<script src="m2br.dialog.pack.js"></script>
		<script src="m2br.dialog.js"></script>
		<link rel="stylesheet" type="text/css" href="m2br.dialog.css" />
	</head>
	
	<body>
		<form action="" method="post" name="form" onsubmit="return Validar();">
			<input type="text" name="nome">
			<input type="submit" value="enviar" name="enviar" class='enviar'>
		</form>

		<script>
			function Validar(){			
				var nome = form.nome.value;	
				if (nome == "") {				
						$('.enviar').m2brDialog({
							tipo	: 'erro', 
							largura	: 300,
							altura	: 100,		
							titulo	: 'Alerta!',
							texto	: '<h3>Erro ao enviar os dados</h3> <div class="text">Por favor, preencha o campo nome!</div>'
							
						});				
					return false;
				}
			};
		</script>
	</body>
</html>

 

Share this post


Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0
function Validar(){			
  var nome = form.nome.value;	
  if (nome == "") {				
    $('.enviar').m2brDialog({
      tipo	: 'erro', 
      largura	: 300,
      altura	: 100,		
      titulo	: 'Alerta!',
      texto	: '<h3>Erro ao enviar os dados</h3> <div class="text">Por favor, preencha o campo nome!</div>'
    });				
    return false;
  }
	return true;
};

Coloca um return true. Assim

Share this post


Link to post
Share on other sites
  • 0

Brother, tente usar algo mais dinamico no seu formulario, eu curto muito formularios em Ajax, ele da o alerta na hora sem ser com aquelas janelas chatas. da um bizu ai... eu acho q fica muito mais elegante e acho que é ate mais facil por ter muito material para adaptar! abraço

Share this post


Link to post
Share on other sites
  • 0
Em 19/04/2017 at 07:41, RafaelTOF disse:

Brother, tente usar algo mais dinamico no seu formulario, eu curto muito formularios em Ajax, ele da o alerta na hora sem ser com aquelas janelas chatas. da um bizu ai... eu acho q fica muito mais elegante e acho que é ate mais facil por ter muito material para adaptar! abraço

Estou começando agora com Javascript, mas acho interessante a janela modal em casos de confirmação e em casos de sucesso. Mas estou estudando todas as possibilidades de usa-la.

 

Dei uma olhada naquele JqueryValidation e achei muito interessante. Vou dar uma estudada. Muito obg pela dica!

 

 

  • +1 1

Share this post


Link to post
Share on other sites
  • 0
Em 18/04/2017 at 14:52, itlpps disse:

function Validar(){			
  var nome = form.nome.value;	
  if (nome == "") {				
    $('.enviar').m2brDialog({
      tipo	: 'erro', 
      largura	: 300,
      altura	: 100,		
      titulo	: 'Alerta!',
      texto	: '<h3>Erro ao enviar os dados</h3> <div class="text">Por favor, preencha o campo nome!</div>'
    });				
    return false;
  }
	return true;
};

Coloca um return true. Assim

Olá, infelizmente não tive êxito dessa forma. Mas pesquisando achei outra janela modal a qual obtive sucesso na minha aplicação. Desde já agradeço por sua atenção. Obg!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Anderson Ronilson Xavier
      Olá a todos gostaria da ajuda dos colegas estou em um projeto de site landing page  usando o plugin construtor de sites chamado themify ultra e não estou conseguindo uma galeria de imagens igual ao cliente está me pedindo que responsiva e com um menu que tenha as opções por exemplo "todas maçã banana laranja " se eu clicar em maçã a galeria ocultaria as bananas e Laranja e se eu clicar em todas e voltaria a apresentar todas as frutas ... Desculpa o jeito de explicar ... Mas galeria não estou conseguindo achar nada que me ajude a opção do themify ultra foi do próprio cliente que já tinha e acabei topando por fazer usando ele mesmo mas no site do themify não achei nenhum pluguin interessante a galeria deles é a padrão do WordPress será que teria como eu usar alguma outra os colegas tem alguma sugestão? 
       Vou deixar um site que o cliente deixou de modelo de como ele gostaria de que dele ficasse
       
      www.levelmont.com.br
       
      Grato pelo ajuda dos colegas.
       
       
    • By lucianfpaula
      Olá saudações, tenho a seguinte duvida, dentro de uma div vou ter varios campos de texto, seja h1, p, smaill etc.. a minha duvida é a seguinte: como manipular a cor de um texto selecionado, tipo tenho um <h1>Minha texto que pode ser grande, quero mudar essa cor</h1> tem varios editor que usam textarea, mas queria saber se é possivel fazer isso a partir de qualquer tag. tipo seleciono o texto e clico em um botão com a cor que quero e mude o texto selecionado.
       
      Muito obrigado
    • By peterstefan
      Bom dia, estou fazendo uma cadastro via rest e estou utilizando o curl para cadastrar no webservice...
      Meu código está cadastrando tudo certinho, porem quando ele cadastra e mostra o retorno que foi cadastrado com sucesso ele fica o AGUARDE, CARREGANDO e não para.. não sei oque esta faltando pq já tentei varias coisas e não deu certo... 
       
       
       
      $Data = [ "nomeRazaoSocial" => $PostData['nomeRazaoSocial'], "identMF" => $PostData['identMF'], "email" => $PostData['email'], "telefone" => $PostData['telefone'], "senhaProvisoria" => $PostData['senhaProvisoria'] ]; $DataString = json_encode($Data); $curl = curl_init(WEBSERVICECADASTRO); curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($curl, CURLOPT_POSTFIELDS, $DataString); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); curl_setopt($curl, CURLOPT_HTTPHEADER, array( 'Content-Type: application/json', 'Content-Length: ' . strlen($DataString)) ); $result = curl_exec($curl); if ($result) { $jSON['success'] = "<i class='icon-checkmark'></i>Pronto, cadastro foi realizado com sucesso!"; }else{ $jSON['error'] = "<i class='icon-warning'></i>Oops! Erro ao cadastrar! Por favor, tente novamente!"; }  

       

    • By Augustomesquita
      Bom dia pessoal!
      Vocês também estão programando em primeira pessoa? Recentemente escrevi este artigo e gostaria de compartilhar a ideia com vocês.
      Pare de programar em primeira pessoa!
    • By DunkMask
      Olá, boa tarde.
       
      estou enfrentando um probleminha aqui. estou criando um teste aqui para inserir um canvas em um mapa e o angulo que ele esta entrando nao esta bacana, então preciso alterar ele.
       
      Mas acontece que ao usar o context.rotate() ele esta distorcendo todo o meu desenho e nao rotaciona o todo.
      Estou passando posição x e y, o _M_ seria o tamanho do desenho referente ao zoom do mapa e o tipo é um indicador qualquer e  para posicionar ele no mapa, até ai tudo bem, funciona perfeitamente, mas quando tento rotacionar que o problema começa.
      function poste(pX, pY, _M_, context,tipo){ context.strokeStyle = '#000000'; context.lineWidth = 1; context.lineJoin = 'round'; context.lineCap = 'round'; context.style(). switch(tipo) { case 1: context.beginPath(); context.arc(pX+(12.5 * _M_), pY+(6 * _M_), 17 * _M_, 111.2 * (Math.PI / 180), 68.8 * (Math.PI / 180), true); context.stroke(); context.beginPath(); context.arc(pX+(41.9 * _M_), pY+(12.5 * _M_), 25 * _M_, 158 * (Math.PI / 180), 202 * (Math.PI / 180), false); context.stroke(); context.beginPath(); context.arc(pX+(12.5 * _M_), pY+(19 * _M_), 17 * _M_, 291.3 * (Math.PI / 180), 248.8 * (Math.PI / 180), true); context.stroke(); context.beginPath(); context.arc(pX+(-16.9 * _M_), pY+(12.5 * _M_), 25 * _M_, 22 * (Math.PI / 180), 338 * (Math.PI / 180), true); context.stroke(); break; } } Alguém pode me dar uma luz, eu tento inserir o rotate no final de todas as linhas ele buga, tento inserir no começo e ele buga, ou se eu insiro fora do switch ele buga.
       
      se puderem me apontar uma solução eu agradeço
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.