Verificar se duas caixas de texto têm o mesmo valor

[Pedro098]

Bom dia, eu estou a criar um código que permite inserir um valor em duas caixas de texto e depois ao carregar num botão as caixas de texto apresentadas ficam escondidas e são apresentadas outras duas para inserir os valores e ao carregar num outro botão tem como função verificar se o valor inserido anteriormente é igual ao valor inserido nessas duas.

A parte de "registo" está a funcionar mas a parte de "login" só verifica se as caixas de texto estão preenchidas mas não faz a validação.

HTML:

<a id="reg">Register</a>

<a id="valuser">User: </a><input type="text" name="vuser" id="vusertxt">
<a id="valuser2"></a><input type="text" name="vuser2" id="vusertxt2">

<a id="valpass">Pass: </a><input type="password" name="vpass" id="vpasstxt">
<a id="valpass2"></a><input type="password" name="vpass2" id="vpasstxt2">

<input type="submit" value="Validate" onclick="val()" name="bval" id="val">
<input type="submit" value="Login" onclick="check()" name="check" id="login">

JS (esconder as caixas de texto):

document.getElementById("login").hidden = true;
document.getElementById("vusertxt2").hidden = true;
document.getElementById("vpasstxt2").hidden = true;

JS (apresentar novas caixas de texto e verificar os valores):

function val(){

var textValuser = document.getElementById("vusertxt").value;
var textValpass = document.getElementById("vpasstxt").value;

if (!textValuser.match(/\S/))
{
alert("Field blank");
}
if (!textValpass.match(/\S/))
{
alert("Field blank");
}
else{

document.getElementById("val").hidden = true;
document.getElementById("vusertxt").hidden = true;
document.getElementById("valuser").innerHTML = "";
document.getElementById("vpasstxt").hidden = true;
document.getElementById("valpass").innerHTML = "";
document.getElementById("reg").innerHTML = "Login";
document.getElementById("login").hidden = false;


document.getElementById("vusertxt2").hidden = false;
document.getElementById("valuser2").innerHTML = "User: ";
document.getElementById("vpasstxt2").hidden = false;
document.getElementById("valpass2").innerHTML = "Pass: ";
document.getElementById("login").disabled = false;
}
}
function check(){

var textValuser2 = document.getElementById("vusertxt2").value;
var textValpass2 = document.getElementById("vpasstxt2").value;

if (!textValuser2.match(/\S/))
{
alert("Field blank");
}
if (!textValpass2.match(/\S/))
{
alert("Field blank");
}

else{

if(textValuser2 == textValuser && textValpass2 == textValpass){
document.getElementById("reg").innerHTML = "Nice !";
}
else{
document.getElementById("reg").innerHTML = "Wrong !";
}
}
}

Obrigado.

Edited March 12, 2016 at 10:41 PM by thoga31
GeSHi

[HappyHippyHippo]

só para ter uma ideia clara antes de começar a analisar o código

o que dizes é que os textos das duas caixas parecem validar e o texto "Nice !" é sempre apresentado, qualquer que sejam os parâmetros dos testes, certo ?

[Pedro098]

só para ter uma ideia clara antes de começar a analisar o código

o que dizes é que os textos das duas caixas parecem validar e o texto "Nice !" é sempre apresentado, qualquer que sejam os parâmetros dos testes, certo ?

Não o texto "Nice !" só é apresentado quando os valores são iguais, caso contrario aparece o texto "Wrong !".

[HappyHippyHippo]

Não o texto "Nice !" só é apresentado quando os valores são iguais, caso contrario aparece o texto "Wrong !".

isso é o que pretendes, eu estou a perguntar o que está a acontecer para dizeres que não está a funcionar

[Pedro098]

Não aparece o texto o código funciona até a parte de verificação se os campos estão preenchidos mas quando carrego no botão "login" não acontece nada.

[HappyHippyHippo]

Não aparece o texto o código funciona até a parte de verificação se os campos estão preenchidos mas quando carrego no botão "login" não acontece nada.

ok, vamos ver se chagas ao problema :

diz onde estão declaradas todas as variáveis existentes no seguinte código

if(textValuser2 == textValuser && textValpass2 == textValpass){

[Pedro098]

ok, vamos ver se chagas ao problema :

diz onde estão declaradas todas as variáveis existentes no seguinte código

if(textValuser2 == textValuser && textValpass2 == textValpass){

A variável "textValuser2" e "textValpass2" estão dentro da função "check", a variável "textValpass" e "textValuser" estão dentro da função "val".

[HappyHippyHippo]

A variável "textValuser2" e "textValpass2" estão dentro da função "check", a variável "textValpass" e "textValuser" estão dentro da função "val".

e estarem em funções diferentes não te faz franzir a sobrancelha ?

[Pedro098]

e estarem em funções diferentes não te faz franzir a sobrancelha ?

Pois....mas já tentei coloca-las fora das duas funções mas também sem sucesso, e dentro da função "val" ao validar se os campos estão preenchidos, a função valida as quatro caixas de texto mas eu pretendo validar duas de cada vez.

Edited March 10, 2016 at 11:26 AM by Pedro098

[HappyHippyHippo]

e se declarares as variáveis que não estão declaradas na funcão "check", dentro dessa mesma função ?

[Pedro098]

e se declarares as variáveis que não estão declaradas na funcão "check", dentro dessa mesma função ?

Já está a funcionar muito obrigado !

[HappyHippyHippo]

Pois....mas já tentei coloca-las fora das duas funções mas também sem sucesso

só uma explicação porque isso não resulta:

estás a declarar as variáveis fora das funções, e como o código está, vou assumir que as estás a inicializar com os valores das caixas de texto.

no entanto, como a instanciação é feita fora das funções, esse código é executado no momento que o browser "lê" esse código. isso leva a que o valor contido nessas variáveis seja a string vazia, porque é esse o valor das caixas de texto no seu estado inicial.

quando a função "check" é chamada, o valor das variáveis "textValpass" e "textValuser" não contem os valores das caixas de texto, mas sim uma string vazia pela razão já descrita, logo irá invalidar a comparação com as outras duas variáveis.