[RESOLVIDO] - Cancelar submit de formulario

12 respostas
jks1903

Pessoal, no evento onSubmit de um formulário HTML, chamo uma função Javascript responsável por verificar se os campos estão preenchidos corretamente.
Caso não estiverem, ele mostra um alerta na tela e a minha intenção é cancelar o envio do form.

Porém, não estou conseguindo cancelar esse evento. Andei procurando um pouco e vi algo como event.returnValue = false, porém sem sucesso.

Saberiam me dizer como posso fazer para cacnelar o submit de um formulário?

Obrigado.

12 Respostas

guilherme.dio
e.preventDefault();
jks1903

Cara, o “e.” no caso seria de event, certo?

Pois tentei dessa forma e o formulário continua a ser submetido.

Veja meu código:

<script type="text/javascript" language="Javascript">
            function valForm(){
                
                erro = "";
                nErros = 0;
                
                if (!verificaRadios()){
                    erro += "Selecione um sentido para a transferência.";
                    nErros++;
                }
                
                if (document.frm.cmbTabelas.value == 0){
                    
                    erro += "Selecione uma tabela para a tranferência.";
                    nErros++;
                    
                }
                
                if (nErros>0){
                    window.alert(erro);
                    e.preventDefault();
                }
            }
        </script>

Já no formulário está assim:

<form id="frm" name="frm" method="post" action="acoes?acao=transf" onsubmit="valForm()">

O que está ocorrendo: Ele exibe os alertas de erro do js, porém o formulário é enviado da mesma forma. AO invés de e.preventDefault tentei também com event.preventDefault mas também não tive sucesso…

Há algo errado?

Obrigado.

perdeu

tente assim:

<form action="algo" method="post" onsubmit="validarCampos(this); return false;" >
jks1903
perdeu:
tente assim:
<form action="algo" method="post" onsubmit="validarCampos(this); return false;" >

Ali no validarCampos no caso seria o valForm, correto?

Eu tentei com o return false ao final, porém o formulário ainda é submetido.
Eu faço os testes no js e também no servidor. Porém, estou tentando não enviar para o servidor em caso de erro para poupar processamento no servidor.

perdeu

vc tem q colocar return false quando campo o não for validado.

function valForm(){  
          
        erro = "";  
        nErros = 0;  
          
        if (!verificaRadios()){  
            erro += "Selecione um sentido para a transferência.";  
            nErros++;  
        }  
          
        if (document.frm.cmbTabelas.value == 0){  
              
            erro += "Selecione uma tabela para a tranferência.";  
            nErros++;  
              
        }  
          
        if (nErros>0){  
            window.alert(erro);  
            return false;
        }  
    }
jks1903
perdeu:
vc tem q colocar return false quando campo o não for validado.
function valForm(){  
          
        erro = "";  
        nErros = 0;  
          
        if (!verificaRadios()){  
            erro += "Selecione um sentido para a transferência.";  
            nErros++;  
        }  
          
        if (document.frm.cmbTabelas.value == 0){  
              
            erro += "Selecione uma tabela para a tranferência.";  
            nErros++;  
              
        }  
          
        if (nErros>0){  
            window.alert(erro);  
            return false;
        }  
    }
Fiz isso, mas ainda não consegui. A função js ficou assim:
<script type="text/javascript" language="Javascript">
            function valForm(){
                
                erro = "";
                nErros = 0;
                
                if (!verifica()){
                    erro += "Selecione um sentido para a transferência.";
                    nErros++;
                }
                
                if (document.frm.cmbTabelas.value == 0){
                    if (erro == ""){
                        erro += "\n";
                    }
                    
                    erro += "Selecione uma tabela para a tranferência.";
                    nErros++;
                    
                }
                
                if (nErros>0){
                    window.alert(erro);
                    return false;
                }
            }
     </script>
Porém, com o formulário assim:
<form action="algo" method="post" onsubmit="valForm(); return false;" >

ele não submete o formulário mesmo quando é para enviar.

Já se eu retirar o "return false" do formulário, no evento onSubmit, ele permanece enviando o form com as informações incorretas.

MAs obrigado por estar me dando uma força.

perdeu

veja se n é problema com cache, vou fazer um exemplo simples ja posto ai.

perdeu

testei aqui deu certo.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">
	function validarCampos(frm){
		var erros = 0;
		var mgs = "";
		
		if(frm.nome.value == ''){
			msg = "Informe o nome.\n;"
			erros++;
		}

		if(frm.idade.value == ''){
			mgs += 'Informe a idade.\n';
			erros++;
		}		

		if(frm.cidade.value == ''){
			mgs += 'Informe a cidaade.\n';
			erros++;
		}

		if(frm.endereco.value == ''){
			mgs += 'Informe o endereco.\n';
			erros++;
		}

		if(erros>0){
			alert(mgs);
			return false;
		}	

		
	}
</script>

</head>
<body>
<form action="action.php" method="post" onsubmit="validarCampos(this); return false;">

	nome: <input type="text" id="nome" name="nome" /> <br>
	idade: <input type="text" id="idade" name="idade" /> <br>
	cidade: <input type="text" id="cidade" name="cidade" /> <br>
	endereco: <input type="text" id="endereco" name="endereco" /><br>
	
	<input type="submit" value="Enviar" />

</form>
</body>
</html>
jks1903

perdeu:
testei aqui deu certo.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript">
	function validarCampos(frm){
		var erros = 0;
		var mgs = "";
		
		if(frm.nome.value == ''){
			msg = "Informe o nome.\n;"
			erros++;
		}

		if(frm.idade.value == ''){
			mgs += 'Informe a idade.\n';
			erros++;
		}		

		if(frm.cidade.value == ''){
			mgs += 'Informe a cidaade.\n';
			erros++;
		}

		if(frm.endereco.value == ''){
			mgs += 'Informe o endereco.\n';
			erros++;
		}

		if(erros>0){
			alert(mgs);
			return false;
		}	

		
	}
</script>

</head>
<body>
<form action="action.php" method="post" onsubmit="validarCampos(this); return false;">

	nome: <input type="text" id="nome" name="nome" /> <br>
	idade: <input type="text" id="idade" name="idade" /> <br>
	cidade: <input type="text" id="cidade" name="cidade" /> <br>
	endereco: <input type="text" id="endereco" name="endereco" /><br>
	
	<input type="submit" value="Enviar" />

</form>
</body>
</html>

cara, testei esse teu código aqui e não funcionou como esperado, rsrs.

Nesse caso ele não está enviando de nenhuma forma.
Por exemplo, tenta preencher todos os campos com alguma informação e veja se o formulário é enviado, porque aqui ele não enivou.

Vlw.

perdeu

tente assim,

if(erros>0){
			alert(mgs);
			return false;
		}

		frm.submit();
jks1903
perdeu:
tente assim,
if(erros>0){
			alert(mgs);
			return false;
		}

		frm.submit();

Blza, agora sim. Como o esperado.
Vou adpatar para aquele meu caso ali esse código.

Vlw mesmo.

Abraço.

perdeu

opa de boa, se precisar de mais algo coisa so falar.

Criado 21 de agosto de 2012
Ultima resposta 22 de ago. de 2012
Respostas 12
Participantes 3