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 renan mafra
      Olá pesssoal,

      Sou novato em JS.
      Eu tenho 6 links, que são imagens que quero substituir, uma pela outra.
      Eu sei que poderia fazer isso facilmente via CSS, mas para treinar quero fazer da seguinte forma:

      Minha ideia seria pegar o src das imagens e alterar mudando o nome da imagem, tipo assim:
      Tenho imagens que são os links nomeados assim:    carro.png / carro-B.png (uma imagem(link) é branca e a outra é amarela).

      Como faço para alterar a imagem trocando uma pela outra nesse esquema ?
      <a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a>
      e trocar para
      <a href="#"><img src="links/carro-B.png" name="menu0" width="90" height="13" border="0"/></a>
       
      Como são 6 imagens eu estou pegando via getElementsByTagName e depois fazer uma função que automatize para todas as outras.....
      Tirando o CSS HOVER via Javascript, essa seria a melhor maneira de automatizar essa troca ?

      vai lá o código:
       
      <html> <head> <style> body{background-color: #000000;} </style> <script> window.onload = function(){ var menu0 = document.getElementsByName("menu0"); var imagem = menu0[0].src; ////////////////////////////////////////////// //bloco que vai varrer cada item: //////////// //for(var i=0; i<menu0.length; i++){ // alert(menu0[i].src); //} ////////////////////////////////////////////// } </script> </head> <body> <a href="#"><img src="links/carro.png" name="menu0" width="90" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/livro.png" name="menu0" width="86" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/aviao.png" name="menu0" width="109" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/motos.png" name="menu0" width="108" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/bicicleta.png" name="menu0" width="114" height="13" border="0"/></a>&nbsp;&nbsp;&nbsp; <a href="#"><img src="links/onibus.png" name="menu0" width="114" height="13" border="0"/></a> </body> </html> a imagem carro.png tem o seu respectivo carro-B.png
                        aviao.png                                        aviao-B.png
       
      E assim por diante.... Essa é uma boa maneira de fazer isso via JS ?? ou tem melhores ?
       
    • By granderodeo
      Olá tenho a página index.php e tenho a página product.php, ao clicar no produto na página inicial, quero que redirecione para página product.php mostrando os dados do determinado produto que cliquei, iniciei o código mais não está dando certo, Obrigado.
       
      index.php
      <?php if (is_array($products)) { foreach ($products as $id => $row) { ?> <div class="col-sm-6 col-md-4 col-lg-3 mb-2"> <div class="card-deck"> <div class="card p-2 border-secondary mb-2"> <a href="product.php?id=<?= $row['product_id'] ?>"> <div class="hover-image"> <img class="card-img-top border-secondary" src="images/<?= $row['product_image'] ?>"/> <a href="#"><span class="texto"></span></a> </div> </a> <h3 class="text-center"><?= $row['product_name'] ?></h3> <div class="text-center text-black rounded p-1" style="font-size: 20px;">Valor&nbsp;$<?= $row['product_price'] ?></div> <button class="btn btn-success btn-block" type="button" value="Add to cart" onclick="cart.add(<?= $row['product_id'] ?>);">Adicionar ao carrinho</button> </div> </div> </div> <?php } } else { echo "No products found."; } ?>  
      product.php
      <?php $products = $_GET["product_id"]; if (is_array($products)) { foreach ($products as $id => $row) { }}; $row['product_name'] ?>  
    • By 3agdeu
      Bom dia a todos.

      Quero saber se alguns dos sábios participantes saberia um forma que capturar um informação (constantemente atualizada) apresentada em uma aplicação java na tela. São os dados de variação de ações, nos respectivos sites de operações. Geralmente aparecem em um canto fixo ou ficam em um elemento que flutua sobre o gráfico da ação (penso que rodem em java).

      Posso interceptar e interpretar os sinais enviados ao monitor?

      Posso interceptar as atualizações da maquina java e/ou o script?

      Existe um programa para fazer a leitura de uma determinada parte da tela que fica constantemente se atualizando?

      Obrigado.
    • By ChuChun
      Estou começando a mexer com progromação, estive fazendo um algoritmo de física, mas, quando pedi para que fossem coletados os campos para fazer assim a equação, não da certo, este é o código da parte que estou com dificuldade:

       
      $("#btn1").click(function(){ var comprimento = parseFloat($("#comprimento").val()); var espiras = parseFloat($("#espiras").val()); var no = parseFloat($("#no").val()); var multpi = parseFloat($("#multpi").val()); var pi = parseFloat($("#pi").val()); var amperes = parseFloat($("#amperes").val()); var valor = parseFloat($("#valor").val()); var resultado = (var multpi = parseFloat($("#multpi").val() * var pi = parseFloat($("#pi").val()) * parseFloat($("#no").val()) * (parseFloat($("#espiras").val()) * parseFloat($("#comprimento").val()) )* parseFloat($("#amperes").val());  
    • By Kelven
      Existe alguma maneira de meu código não aparecer no código fonte que não seja por meio de Php? Tipo um código javascript que não apareça no código fonte? Quero fazer uma verificação if else se é um determinado valor de uma variável mas sem usar o php pois o blog só aceita javascript, html e css.
×

Important Information

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