function validatePW()
{
var r_pw=document.getElementById('register_password').value;
var r_cpw=document.getElementById('register_confirmpw').value;
var r_button=document.getElementById('register_button');
var r_user=document.getElementById('register_username').value;
if(r_cpw)
{
if (r_pw == r_cpw)
{
document.getElementById('message_alert').innerHTML='';
if(r_user)
{
r_button.disabled = false;
r_button.style.opacity = 1;
}
}else{
document.getElementById('message_alert').innerHTML='doesnt match';
r_button.disabled = true;
r_button.style.opacity = 0.5;
}
}
}
document.getElementById('register_username').onkeyup = function()
{
validatePW();
}
document.getElementById('register_confirmpw').onkeyup = function()
{
validatePW();
}
document.getElementById('register_password').onkeyup = function()
{
validatePW();
}
.headline
{
padding-bottom:1px;
margin-bottom:25px;
text-align:center;
box-shadow:0 1px 0 #bbbbbb;
}
.content
{
display:inline-block;
padding:10px 30px 30px 30px;
margin:10px 50px;
background:#eeeeee;
border-radius:3px;
border:1px solid #bbbbbb;
}
.center
{
width: 100%;
position: absolute;
top: 50%;
text-align:center;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
h1
{
display:inline-block;
font-weight:400;
}
.sign_up_input
{
float:left;
margin-left:-2px;
}
.sign_up_input input
{
line-height:24px;
border-radius: 0 3px 3px 0;
border:1px solid #bbbbbb;
}
.sign_up_icon
{
float:left;
display:inline-block;
}
.sign_up_icon div
{
padding:1px 9px 0 9px;
background:#ddd;
border-radius:3px 0 0 3px;
border:1px solid #bbbbbb;
height:25px;
box-shadow:inset -2px -3px 4px rgba(0, 0, 0, 0.025);
}
#register_button
{
width:218px;
padding:1px 0;
font-size:18px;
background:#dddddd;
border-radius:3px;
border:1px solid #bbbbbb;
opacity:0.5;
}
#register_button:active
{
box-shadow:inset 0px 1px 1px rgba(0, 0, 0, 0.075);
}
#message_alert
{
float:left;
margin-top:3px;
font-size:12px;
}
<div class="center">
<div>
<div class="content">
<div class="headline"><h1>REGISTER</h1></div>
<div class="sign_up_icon"><div><img src="" style="height:22px; margin:1px 2px;"/></div></div>
<div class="sign_up_input"><input type='text' name='register_username' id='register_username' maxlength="64"/></div><br><br>
<div class="sign_up_icon"><div><img src="" style="height:26px; margin-top:-1px;"/></div></div>
<div class="sign_up_input"><input type="password" name="register_password" id="register_password" maxlength="64"/></div><br><br>
<div class="sign_up_icon"><div style="padding:1px 2px 0 9px;"><img src="" style="height:26px; margin-top:-1px;"/><span style="display:inline-block; font-size:13px; line-height:32px; vertical-align:top; margin-left:-3px">✔</span></div></div>
<div class="sign_up_input"><input type="password" name="register_confirmpw" id="register_confirmpw" maxlength="64"/></div><br><br>
<span id="message_alert"></span><br><br>
<a href="#"><input id="register_button" type="button" value="Register" onclick="return regformhash(this.form, this.form.username, this.form.email, this.form.password, this.form.confirmpwd); disabled"/></a>
</div>
</div>
</div>
The problem is here:
if(r_user)
{
r_button.disabled = false;
r_button.style.opacity = 1;
}
If you type into the inputs normally it works perfectly, unless you delete the value of the first input. Then the register-button doesnt hide as it should. Even if there is no value in the first input. As you change a value in the lower inputs again it works fine.
Thanks for your time!
Aucun commentaire:
Enregistrer un commentaire