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 WagnerFilho
      Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda!
      Eu separei os arquivos js por responsabilidades.
      Cada arquivo será encarregado para uma determinada função.
      Estou carregando estes arquivos da seguinte forma:

       
      <html> <head> </head> <body> <div id="app-info"> <span id="app-name">name</span> </div> <script src="controllers/controllerExample.js"></script> <script src="resources/ajaxApp.js"></script> <script src="models/modelExample.js"></script> <script src="app.js"></script> </body> </html> observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern
      Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ?
      Como posso fazer isto ?
      Então tenho alguns arquivos js.
       
      app.js controllers / controllerExample.js models / modelExample.js resources / ajaxApp.js
        app.js
      let ObjectApplication = {}; ;(function( window, document, undefined ) { 'use strict'; function app() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.app = app(); })( window, document ); MyGlobalObject.controllerExample.publicMethod(); console.log(objectApplication.name);  
      controllerExample.js
      ;(function( window, document, undefined ) { 'use strict'; function controllerExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return MyGlobalObject.modelExample.publicMethod(); //return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.controllerExample = controllerExample(); })( window, document );  
      modelExample.js
      ;(function( window, document, undefined ) { 'use strict'; function modelExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { buildAppInfo(); //return 'Init in Model'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.modelExample = modelExample(); })( window, document );  
      ajax
      let buildAppInfo = () => { let url = 'app.json'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status = 200) app = JSON.parse(xhr.responseText); console.log(app); } } xhr.send(); };
       
    • By Motta
      As 7 linguagens de programação que você deve aprender em 2020
    • By Rodrigo Biaggio
      Senhores, conseguem me ajudar a evoluir na questão abaixo??
       
      Tenho esse código simples, aonde chamo uma API e percorro um array e pego apenas um campo e faço a soma. Só que preciso retornar além do campo "consumedHostUnits" e o campo "name", conforme print.
       

       
      Alguém poderia me dar uma luz, como fazer isso? 
       
      O resultado seria mostrando 
       
      Name: APIGateway | ConsumedHostsUnits: 2
       
      Segue o HTML:
       
      <!DOCTYPE html> <html lang="pt-br"> <title>API Management</title> <head> <meta charset="8"> </head> <body> <script> var urlapi = ''; function fazerRequisicao(){ var url = urlapi + document.getElementById('hostgroup').value; //var url = urlapi; var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, false); xhttp.send(); var arrayElements = xhttp.responseText.split(','); var i; var sumComsumed = 0.0; for (i = 0; i < arrayElements.length; i++) { if(arrayElements[i].includes("consumedHostUnits")) { sumComsumed = sumComsumed + +arrayElements[i].split(":")[1]; } } document.getElementById("div-responsetext").innerHTML = sumComsumed; } </script> <button onclick="fazerRequisicao();">Pesquisar</button> <input type="text" id="hostgroup" style="width: 100px;"> <hr/> <div id="div-responsetext"></div> </body> </html> Obrigado.
       
    • By Deivid Santos
      Salve galera, estou quebrando a cabeça aqui, já pesquisei mas não achei nada sobre.
      Eu tenho alguns dados que busco no banco de dados e mostro em um datagrid, além do CRUD que implantei eu preciso ter a opção de mudar as posições no banco. Preciso fazer isso pois elas são informações que vão para um telão. e ele segue uma ordem na mostragem dos dados.
      Teria alguma forma de arrastar a linha do grid e assim ele mudar o ID do mesmo conforme a posição que ficaria e assim os outros também seriam atualizados?
      Como exemplo segue uma imagem de como ele funciona. por exemplo eu movimento o ID 1 na posição abaixo do ID 3, assim o ID 2 e 3 se tornariam 1 e 2 com essa movimentação e o que era 1 se torna 3.

       
      Agradeço qualquer ajuda que puder.
       
       
    • By juliosertori
      Olá boa noite, tudo bem galera?
       
      Tenho um input:
      <input type="text" value="0" name="qtdProds" id="qtdProds" class="form-control" onkeyup="atualizaTotalPrecos(this);" required /> E quando ele está ONBLUR, funciona o seguinte script:
      function atualizaTotalPrecos(sel){ var nameInput = sel.name; var IdNameProds = parseInt(nameInput.match(/\d/g).join('')); var valor = $('input[name="produtos_pdv['+IdNameProds+'][qtdProds]"]').val(); var custo = $('input[name="produtos_pdv['+IdNameProds+'][custoProds]"]').val(); var totalCusto = valor*custo; $("[name='produtos_pdv["+IdNameProds+"][custoTotalProds]']").val(totalCusto); //$("[name='totalPedidoDesconto']").val(totalCusto); var descontoPedido = $("#descontoPedido").maskMoney('unmasked')[0]; var total = 0; $('.somaTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) total += valor; }); var totalDescontado = total - descontoPedido; //alert(totalDescontado); $(".SomaTotalPrecos").maskMoney('mask', total); $(".totalpedidos").maskMoney('mask', totalDescontado); //////////////// var totalCusto = 0; $('.somaCustoTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) totalCusto += valor; }); $(".SomaTotalCustos").maskMoney('mask', totalCusto); };  
      Onde atualizo o campo .SomaTotalPrecos, funciona perfeitamente.
       
      Mas quando troco para Onkeyup, e inserir 1 por exemplo, primeiro ele preenche o campo com 0, e da segunda vez, ele atualiza para a primeira vez, ou seja, 1.
       
      Ex: coloco o valor de R$ 10,00 e na quantidade coloco 1, ele preenche o campo com 0, depois se insiro 2, ai ele preenche o campo com a quantidade anterior, ou seja 1xR$ 10,00
       
×

Important Information

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