JavaScript não funciona no Firefox e nem no Chrome

J.J. · October 6, 2011

Boa tarde,

estou tentando aprender um pouco de JavaScript, fiz esse formulário apenas para testar. Provavelmente pra muitos é super simples, mas pra quem está aprendendo... é complicado... :wacko:

Ele verifica o campo Nome e Cidade, caso fiquem em branco aparece a mensagem pedindo para o usuário preeencher o campo, vamos ao problemas... no Internet Explorer funciona belezinha, mas no Firefox e no Chrome não... =/

<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

&lt;script language="JavaScript" type="text/JavaScript">
//--> Validação dos Campos <--//
onload=function(){
//Pega o formulário
var formulario=document.getElementById("form1")
//Utiliza o atributo onsubmit para a verificação
formulario.onsubmit=function(){
//Verifica se o campo "X" foi preenchido
if(document.getElementById("nome").value==""){
alert("Por favor preencha o Nome")
return false
}
if(document.getElementById("cidade").value==""){
alert("Por favor preencha a Cidade")
return false
}
}
}
</script>

</head>

<body>
<form name="form1" method="post" action="">
  <p> Nome<br>
    <input name="nome" type="text" id="nome">
  </p>
  <p>Cidade<br>
    <input name="cidade" type="text" id="cidade">
  </p>
  <p>
    <input type="submit" name="Submit" value="Enviar">
  </p>
</form>
</body>
</html>

Quem puder ajudar eu agradeço.

Willian Gustavo Veiga · October 7, 2011

Eles retornam algum erro?

Tente:

window.onload = function () {

Um abraço.

J.J. · October 7, 2011

Não retorna nenhum erro, quando clico no botão "Enviar" simplesmente não acontece nada, ou melhor, até acontece algo, a página tipo se atualiza/recarrega...

Willian, segui sua sugestão e infelizmente não funcionou... =/ (no Internet Explorer tudo certo, Firefox e Chrome não), você tem mais alguma idéia do que possa ser?

Verifiquei o Firefox e o Chrome, e estão com a opção de JavaScript liberada.

Obrigado.

fiote · October 7, 2011

JJ, o seu código funciona no IE porque o IE não dá a mínima para padrões de internet.

var formulario=document.getElementById("form1");

document.getElementById("form1") getElementById("form1") GET ELEMENT BY ID "form1" ... Agora olhe o seu código e verifique se existe algum elemento com o ID igual a "form1". ... Mas no IE funciona mimimi~* Sim, porque o IE, ao não encontrar nenhum elemento com o ID procurado, dá uma de babá e pensa "hmm, acho que o programador esqueceu de definir o ID, vou procurar algum elemento com o NAME igual a form1"... e com isso ele acha o elemento e o script funciona. =) Btw, o chrome dá erro sim. Só que ele não dá erro na hora de clicar no enviar, e sim ao carregar a página.

Uncaught TypeError: Cannot set property 'onsubmit' of null

Edited October 7, 2011 by fiote

J.J. · October 10, 2011

fiote, agora funcionou...

falta de experiência e falta de atenção...

<form name="form1" id="form1" method="post" action="">

id="fom1" Muito obrigado. Surgiu novos problemas =/... tentei implementar algumas coisas ao formulário: Campo "select1" e coloquei(tentei colocar) foco nos campos. Vamos aos problemas: Problema 1: No IE o formulário verifica o campo "nome" e caso esteja vazio mostra a mensagem, mas quando clico em OK ele recarrega a página, mesma coisa com o campo "cidade"... ou seja, se a pessoa preencher o "nome" e tentar enviar sem preencher a "cidade", vai mostrar a mensagem dizendo que o campo "cidade" está vazio e se a pessoa clicar em OK a página é recarregada e perde o valor do campo "nome". No Firefox e no Chrome a verificação funciona e o foco também. Problema 2: No Firefox e no Chrome o campo "select1", não está sendo verificado. Se o usuário preencher o campo "nome" e "cidade" e não selecioner nenhum valor, e clicar em Enviar o formulário é enviado. No IE a verificação do campo "select1" acontece.

<html>
<head>
<title>Teste</title>


&lt;script language="JavaScript" type="text/JavaScript">
//--> Validação dos Campos <--//
window.onload = function (){
//Pega o formulário
var formulario=document.getElementById("form1")
//Utiliza o atributo onsubmit para a verificação
formulario.onsubmit=function(){
//Verifica se o campo "X" foi preenchido
if(document.getElementById("nome").value==""){
alert("Por favor preencha o Nome")
nome.focus();
return false 
}
if(document.getElementById("cidade").value==""){
alert("Por favor preencha a Cidade")
cidade.focus();
return false 
}
if(document.getElementById("select1").value==""){
alert("Por favor selecione algum valor")
select1.focus();
return false 
}
}
}
</script>

</head>

<body>
<form name="form1" id="form1" method="post" action="">
  <p>Nome<br>
    <input name="nome" type="text" id="nome">
  </p>
  <p>Cidade<br>
    <input name="cidade" type="text" id="cidade">
  </p>
  <p>
    <select name="select1" id="select1">
      <option>Selecione</option>
      <option value="1">Valor 1</option>
      <option value="2">Valor 2</option>
    </select>
  </p>
  <p>
    <input type="submit" name="Submit" value="Enviar">
  </p>
</form>
</body>
</html>

Desculpem a inexperiência... provavelmente são erros/dúvidas simples como foi a anterior, mas como eu disse anteriormente estou tentando aprender... :lol:

Obrigado.

Edited October 10, 2011 by J.J.

fiote · October 10, 2011

Vixi, agora é o Chrome que está dando uma de babá...

if(document.getElementById("nome").value==""){
    alert("Por favor preencha o Nome")
    nome.focus();
    return false 
}

nome.focus();

Você definiu essa variável "nome" aonde?

O que? Tá fazendo referencia direta pelo ID do elemento? nome.focus() ao invés de document.getElementById('nome').focus()? Tsc tsc tsc.

O IE dá erro nessa linha e pára a execução, com isso ele não "vê" o return false e supoe que deve continuar com o envio do formulário. Já o Chrome (infelizmente, na minha opinião) aceita a referencia direta e funciona normalmente.

Sobre o problema com o select...

Você está checando se document.getElementById("select1").value é igual à vazio... Ok, ok... Você tem 3 options nesse select. O seu terceiro option tem o valor "2", o segundo option tem o valor "1"... e o primeiro option tem o valor... tem o valor... o que? não tem valor nenhum?

Não ter valor nenhum NÃO NECESSARIAMENTE quer dizer que o valor seja igual a "" (vazio).

Adicione alert(document.getElementById("select1").value); antes do seu IF checando o valor do select e rode a página nos 3 navegadores e veja a diferença.

J.J. · October 11, 2011

fiote, funcionou...

fiz as alterações:

focus

if(document.getElementById("nome").value==""){
alert("Por favor preencha o Nome")
document.getElementById('nome').focus();
return false
}

document.getElementById('nome').focus(); select

<select name="select1" id="select1">
      <option value="">Selecione</option>
      <option value="1">Valor 1</option>
      <option value="2">Valor 2</option>
    </select>

<option value="">Selecione</option>

Agora é ler e praticar mais... Vou tentar inserir um botão para exibir/ocultar uma camada, vamos ver se consigo. :)

fiote, mais uma vez obrigado...

Sign In

JavaScript não funciona no Firefox e nem no Chrome

Question

J.J.

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Willian Gustavo Veiga

Link to comment

Share on other sites

J.J.

Link to comment

Share on other sites

fiote

Link to comment

Share on other sites

J.J.

Link to comment

Share on other sites

fiote

Link to comment

Share on other sites

J.J.

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity