在确认密码部分输入不匹配字符后,文本框将被禁用

时间:2017-08-12 22:38:55

标签: javascript html

有人可以告诉我为什么在输入错配字母后确认密码框会被禁用? 一旦输入了与第一个密码文本框不同的错误密码,该框就会被禁用,我必须刷新页面才能重新开始

<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>

4 个答案:

答案 0 :(得分:0)

它没有被禁用。您只是将文本和背景颜色设置为相同的东西。尝试仅设置背景颜色。

答案 1 :(得分:0)

检查您的颜色属性。文字出现但是红色,所以它与背景相匹配!!!!轻松修复。

答案 2 :(得分:0)

输入字段不会被禁用 - 您仍然可以输入文本,使用Ctrl + A选择字段的内容,使用Del删除它们,但由于文本颜色和背景,您无法看到您输入的内容颜色设置为相同的颜色。您可以尝试仅设置背景颜色,以便可以看到您键入的内容(实际上,您只会看到输入的字符数,因为它是密码字段)。

答案 3 :(得分:0)

在以下功能中,您将背景颜色和星号设置为您所看到的相同颜色。

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!"
    }
 } 

将其替换为此。

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

copass.style.color是星号的颜色,设置为与背景颜色相同的颜色。

这是一个有效的演示。

https://jsfiddle.net/a2jco695/