Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Dennis Aguilar

Substituir alert por função.

Por , em Javascript

Recommended Posts

Dennis Aguilar    0

Dennis Aguilar
Postado

Pessoal estou precisando resolver esse problema, tenho uma função para exibir uma mensagem personalizada, e tenho uma função para validar campos de cadastro, o problema é que quando ele executa a função invalido() a pagida é redirecionada para o action="cadastro.php" que está dentro do formulário, como faço para permanecer na pagina e e fazer o cadastro corretamente?

 

Desculpe o título do tópico errado.

<!DOCTYPE html>
<html>
	<head>
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

  <script src="lib/sweet-alert.min.js"></script>
  <link rel="stylesheet" href="lib/sweet-alert.css">


<script>
function invalido(){
	swal("Oops...", "Todos os campos são Orbigatórios!", "error");
};
</script>

<script type="text/javascript">
function validaCampo()
{
if(document.cadastro.Nome.value=="")
	{
	invalido();
	}
else
	if(document.cadastro.Sobrenome.value=="")
	{
	invalido();
	}
else
        if(document.cadastro.Email.value=="")
	{
	invalido();
	}
else
if(document.cadastro.Senha.value=="")
	{
	invalido();
	}
else
return true;
}
<!-- Fim do JavaScript que validará os campos obrigatórios! -->
</script>
</head>

<body>
<div class="campophp">
<h3>Cadastrar</h3>
<form id="cadastro" name="cadastro" method="post" action="cadastro.php" onsubmit="return validaCampo(); return false;">
  <table border="0">
    <tr>
      <td width="69">Nome</td>
      <td><input name="Nome" type="text" id="Nome" placeholder="Nome" size="32" maxlength="20" />
        <span class="style1">*</span></td>
    </tr>
    <tr>
      <td>Nobrenome</td>
      <td><input name="Sobrenome" type="text" id="Sobrenome" placeholder="Sobrenome" size="32" maxlength="40" />
      <span class="style1">*</span></td>
    </tr>
<td>Email</td>
      <td><input name="Email" type="text" id="Email" placeholder="Email" size="32" maxlength="60" />
      <span class="style1">*</span></td>
    </tr>
    <tr>
      <td>Senha</td>
      <td><input name="Senha" type="password" placeholder="Senha" id="Senha" maxlength="16" />
          <span class="style1">*</span></td>
    </tr>
      <td colspan="2"><p>
        <input name="cadastrar" type="submit" id="cadastrar" value="Concluir meu Cadastro!" /> 
        <br />
          <span class="style1">Todos os campos são obrigatórios! </span></p>
      <p>  </p></td>
    </tr>
  </table>
</form>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rafael Sirotheau    43

Rafael Sirotheau
Postado

Coloca um return false; antes de todas as chamadas a função invalido();

if(...) {
   return false;
   invalido();
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Boa noite, Dennis e Rafael.

Coloca um return false; antes de todas as chamadas a função invalido();

if(...) {
   return false;
   invalido();
}


Realmente o "return false;" faz com que o evento definido pelo HTML não seja executado, mas ele também força uma saída do escopo. Ou seja, não será executado nenhum linha que esteja abaixo do "return false;".

Dennis, outro ponto importante do seu código é tentar não misturar as camadas: HTML, CSS e JavaScript.

Responsabilidade do HTML:

  • Conteúdo;
  • Marcação(tag);
  • Semântica;
  • Estrutura(HTML5).

Responsabilidade do CSS:

  • Visual;
  • Animação(CSS3). *Sim animação visual, mas só começou a ter no CSS3

Responsabilidade do JavaScript:

  • Interação;
  • Comportamento.

Eu deixaria o código mais o menos assim:

HTML:

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="lib/sweet-alert.css">
</head>

<body>
    <h3>Cadastrar</h3>
    <form id="cadastro" name="cadastro" method="post" action="cadastro.php">
        <label>Nome
            <input name="Nome" type="text" id="Nome" placeholder="Nome" size="32" maxlength="20">
            <span class="style1">*</span>
        </label>

        <label>Sobrenome
          <input name="Sobrenome" type="text" id="Sobrenome" placeholder="Sobrenome" size="32" maxlength="40">
          <span class="style1">*</span>
        </label>

        <label>Email
            <input name="Email" type="text" id="Email" placeholder="Email" size="32" maxlength="60">
            <span class="style1">*</span>
        </label>

        <label>Senha
            <input name="Senha" type="password" placeholder="Senha" id="Senha" maxlength="16">
            <span class="style1">*</span>
        </label>
    
        <input name="cadastrar" type="submit" id="cadastrar" value="Concluir meu Cadastro!">
        <span class="style1">Todos os campos são obrigatórios! </span>
    </form>

    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="lib/sweet-alert.min.js"></script>
    <script src="js/validaForm.js"></script>
</body>
</html>


JavaScript(validaForm.js):

var $cadastro = document.getElementById("cadastro");

function  invalido() {
    swal("Oops...", "Todos os campos são Orbigatórios!", "error");
};

$cadastro.addEventListener('submit', function(event) {
    var $origem = event.target;

    if($origem.tagName == 'INPUT' && $origem.value == '') {
        event.preventDefault();        

        invalido();
    };
});

O comando "event.preventDefault()" faz com que não seja executadoo evento padrão, mas diferente do "return false;" ele não sai fora do escopo, ou seja será executa todos os comandos que estão abaixo do "event.preventDefault()".

 

Qualquer dúvida só falar.

 

[]'s

Marco Bruno.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito