Lul Gate Lul Gate - 3 days ago 10
HTML Question

Textbox become disabled after a mismatch character is input in confirm password section

Can anybody tell me why the confirm password box becomes disabled after a mismatch letter is typed?
As soon as a wrong password which is different from the first password text box is typed the box become disabled and I have to refresh the page to start again

<html>
<head><title>title</title></head>
<body>

<h2 style="color:black; padding-left:400px; border:solid red 4px"> Before
You Continue, Please Register!</h2>

<form method="post" action="" id="form" name="myForm" onSubmit="return
validateForm()">
<div>
<fieldset class="setit">
<div align="right">
New password:<input type="password" name="pass" placeholder="enter password"/></br>
<div id="errorPass" class="fullinfo"></div>
Confirm password:<input type="password" name="copass" placeholder="confirm password" onkeyup="checkPass();" /></br>
<div id="errorCopass" class="fullinfo"></div>
<input type="submit" value="Sign up" name="register"/>
<input type="reset" value="cancel">
</div>
</fieldset>
</div>
</form>

<script>

var pass = document.forms.myForm.pass;
var copass = document.forms.myForm.copass;


var pass_error = document.getElementById("errorPass");
var copass_error = document.getElementById("errorCopass");


function validateForm() {
validatePass();
validateCopass();
if( validatePass() && validateCopass()){
document.getElementById("form").action = "../register.php";
document.getElementById("form").submit();
} else {
return false;
}
}

function checkPass()
{
if(pass.value === copass.value){
copass.style.backgroundColor = "#66cc66";
copass.style.color = "#66cc66";
copass_error.innerHTML = "Passwords Match!"
}else{
copass.style.backgroundColor = "#ff6666";
copass.style.color = "#ff6666";
copass_error.innerHTML = "Passwords Do Not Match!"
}
}
</script>

</body>
</html>

Answer Source

The input field does not become disabled - you can still enter text, select the contents of the field with Ctrl+A, delete them with Del, but you can't see what you are typing because the text color and the background color are set to the same color. You can try setting only the background color so that you can see what you type (actually, you'll only see how many characters you entered since it is a password field).