lundi 26 octobre 2015

if three input are filled and two specific ones are equal it changes button style; it works, unless value of 'not equal' input is not deleted

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