POSICIONAMENTO AFETANDO CÓDIGO

portaWix · Fevereiro 18, 2015

Pessoal no código abaixo, dentro do script apos o conteudo dentro de window.onload, fora dele vocês podem

observar a funçaõ showHide (el, mode), ela dispara um evento no formulário de modo que se uma das condições

dentro dos if's dentro de window.onload não for obedecida uma mensagem de erro temporizada e ativada, mostrada

por 2 segundos e depois desaparece. Gostaria de saber por que se essa mesma funçao for declarada dentro de window.onload

antes de ser usada nos if, isso gera um BUG no qual ela não temporiza da forma correta (testei pra varios valores de segundos),

e a mesma so funciona se for omitido o return false depois do if.

ps: O CODIO DO JEITO QUE ESTA, FUNCIONA, DESDE QUE A FUNCAO showHide() esteja FORA DE window.onload, porem quando declarada dentro GERA O BUG

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">

<head>

<title>Exercicio 05</title>

window.onload = function () {

var form = document.getElementById("form");

var nome = document.getElementById("name");

var phone = document.getElementById("phone");

var mail = document.getElementById("mail");

var login = document.getElementById("login");

var pass = document.getElementById("password");

var send = document.getElementById("submit");

var validaEmail = /^\w+@\w+\.com$/igm;

var validaLogin = /^(\w|\d)+$/igm;

var allInputs = document.getElementsByTagName("input");

for (var i = 0; i < allInputs.length; i++) {

allInputs.size = 40;

}

function insertMessage (idElement, message) {

var element = document.getElementById(idElement);

element.innerHTML = message;

}

send.onclick = function () {

if (nome.value == "" || mail.value == "" || login.value == "" || pass.value == "") {

insertMessage('error', 'Preencha todos os campos obrigatórios!');

showHide('error', 'block');

} else if (validaEmail.test(mail.value) == false){

insertMessage('error', 'Email no formato incorreto!');

showHide('error', 'block');

} else if ((login.value.length > 12 ||login.value.length < 6) && validaLogin.test(login.value)){

insertMessage('error', 'Login deve ter entre 4 a 12 caracteres e não pode usar caracteres especiais!');

showHide('error', 'block');

} else {

showHide('error', 'none');

form.submit();

}

return false;

}

function showHide (el, mode) {

document.getElementById(el).style.display = mode;

setTimeout("showHide('error', 'none')", 2000);

}

</script>

<style type="text/css">

* {

margin: 0px;

padding: 0px;

list-style: none;

outline: none;

}

form {

width: 400px;

height: 500px;

border: 2px solid #000000;

border-radius: 30px;

margin: 50px auto;

}

label {

display: block;

margin-left: 70px;

margin-top: 40px;

font-family: 'Roboto Condensed', sans-serif;

}

input {

margin-left: 70px;

margin-bottom: 30px;

font-family: 'Roboto Condensed', sans-serif;

display: block;

}

#error {

width: 400px;

height: 40px;

border: 2px solid #000000;

border-radius: 30px;

margin: 10px auto;

background-color: #d6a95f;

text-align: center;

text-transform: uppercase;

line-height: 40px;

font-size: 15px;

font-family: 'Roboto Condensed', sans-serif;

display: none;

}

</style>

</head>

<body>

<div id="error"></div>

<form action="" method="get" id="form">

<label for="name">Nome* : </label>

<input type="text" name="nome" id="name"/>

<label for="phone">Telefone : </label>

<input type="text" name="telefone" id="phone"/>

<label for="mail">E-mail* : </label>

<input type="text" name="email" id="mail"/>

<label for="login">Login* : </label>

<input type="text" name="login" id="login"/>

<label for="password">Senha* : </label>

<input type="password" name="senha" id="password"/>

<input type="submit" name="enviar" id="submit"/>

</form>

</body>

</html>

Entrar

POSICIONAMENTO AFETANDO CÓDIGO

Pergunta

portaWix

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades