添加密码验证后，表单验证不起作用

Question

I am learning JavaScript and working on form validation . 我正在学习JavaScript并致力于form validation 。 I have a simple form that asks for several different fields to be filled out. 我有一个简单的表格，要求填写几个不同的字段。

I had my form validation working. 我已经进行了表单验证。 I then added a function to check if the password fields matched. 然后，我添加了一个功能来检查密码字段是否匹配。 This also checks while the user is typing. 这还将检查用户键入的时间。 The second function works just fine but now the rest of my form validation as stopped functioning all together. 第二个功能工作正常，但是现在我的其余表单验证都停止了一起运行。

Any push here would be appreciated. 任何推动这里将不胜感激。

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<title>Marty the Robot | About</title>

    <link rel="stylesheet" type="text/css" href="css/source.css">
    <link rel="stylesheet" type="text/css" href="css/form.css">
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,500,300,900' rel='stylesheet' type='text/css'>

    <script src="js/script.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/jquery-1.7.1.min.js""></script>

</head>

<body>

<main>

<div class="signupform-container">


 <div id="form-title">
      <h2>
           Create an account
      </h2>
 </div>
<form method="post" action="" id="submitForm">
    <div id="validation"></div>

    <div id="field1-container" class="field-container">
    <label>Name<br>
    <div class="space">
    </div>
    <input type="text" name="FName" placeholder="enter your first name"></label>
    </div>

    <div id="field2-container" class="field-container">
    <label>Last Name<br>
    <div class="space">
    </div>
    <input type="text" name="LName" placeholder="enter your last name"></label>
    </div>

    <div id="field3-container" class="field-container">
    <label>Email<br>
    <div class="space">
    </div>    
    <input type="text" name="Email" placeholder="email@email.com"></label>
    </div>

    <div id="field4-container" class="field-container">
    <label>Username<br>
    <div class="space">
    </div>    
    <input type="text" name="Username" placeholder="enter a username"></label>
    </div>

    <div id="field5-container" class="field-container">
    <label>Password<br>
    <input type="password" id="txtNewPassword" placeholder="enter a password" />
    </div>

    <div id="field6-container" class="field-container">
    <label>Password<br>
    <input type="password" id="txtConfirmPassword" placeholder="enter your password again" onChange="checkPasswordMatch();" />
    </div>

    <div id="field7-container" class="field-container">
    <div class="registrationFormAlert" id="divCheckPasswordMatch">
    </div>


    <div class="registrationFormAlert" id="divCheckPasswordMatch">

    <div id="form-submit">
    <input type="submit" value="Make it so">
    </div>
</form>

<script>
    function Validate(form) {
    var errors = "";
    if (form.Name.value.length === 0) {
        form.Name.style.border = "1px solid red";
        form.Name.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter your first name</li>";
    }
    if (form.LName.value.length === 0) {
        form.LName.style.border = "1px solid red";
        form.LName.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter your last name</li>";
    }
    if (form.Username.value.length === 0) {
        form.Username.style.border = "1px solid red";
        form.Username.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter a username</li>";
    }        
    if (form.Email.value.length === 0) {
        form.Email.style.border = "1px solid red";
        form.Email.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter an email address</li>";
    }
    if (form.Password1.value.length <= 4) {
        form.Password1.style.border = "1px solid red";
        form.Password1.style.backgroundColor = "#FFCCCC";
        errors += "<li>Your password is not long enough</li>";
    }
    if (errors.length > 0) {
        document.getElementById("validation").innerHTML = "<ul>" + errors + "</ul>";
        return false;
    }
return true;
}
document.getElementById("submitForm").onsubmit = function () {
return Validate(this);
};

</script>

<script>
function checkPasswordMatch() {
var password = $("#password").val();
var confirmPassword = $("#confirmpassword").val();

if (password !== confirmPassword)
    $("#divCheckPasswordMatch").html("Passwords do not match!");
else
    $("#divCheckPasswordMatch").html("Passwords match.");
}

$(document).ready(function () {
$("#txtConfirmPassword").keyup(checkPasswordMatch);
});


</script>

</div>

</main>
</body>
</html>

Validation code 验证码

<script>
function Validate(form) {
    var errors = "";
    if (form.FName.value.length === 0) {
        form.FName.style.border = "1px solid red";
        form.FName.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter your first name</li>";
    }
    if (form.LName.value.length === 0) {
        form.LName.style.border = "1px solid red";
        form.LName.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter your last name</li>";
    }
    if (form.Username.value.length === 0) {
        form.Username.style.border = "1px solid red";
        form.Username.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter a username</li>";
    }        
    if (form.Email.value.length === 0) {
        form.Email.style.border = "1px solid red";
        form.Email.style.backgroundColor = "#FFCCCC";
        errors += "<li>Please enter an email address</li>";
    }
    if (form.Password1.value.length <= 4) {
        form.Password1.style.border = "1px solid red";
        form.Password1.style.backgroundColor = "#FFCCCC";
        errors += "<li>Your password is not long enough</li>";
    }
    if (errors.length > 0) {
        document.getElementById("validation").innerHTML = "<ul>" + errors + "</ul>";
        return false;
    }
return true;
}
document.getElementById("submitForm").onsubmit = function () {
return Validate(this);
};

</script>

<script>
function checkPasswordMatch() {
var password = $("#password").val();
var confirmPassword = $("#confirmpassword").val();

if (password !== confirmPassword)
    $("#divCheckPasswordMatch").html("Passwords do not match!");
else
    $("#divCheckPasswordMatch").html("Passwords match.");
}

$(document).ready(function () {
$("#txtConfirmPassword").keyup(checkPasswordMatch);
});


</script>

https://jsfiddle.net/martylavender/n0tb7n4e/ https://jsfiddle.net/martylavender/n0tb7n4e/

Answer 1

You have typo here 你这里有错字

form.Name.value.length

There is no input with name="Name" 没有 名称为“ Name”的输入

Change it to this: 更改为此：

form.FName.value.length

Like this: 像这样：

if (form.FName.value.length === 0) {
    form.FName.style.border = "1px solid red";
    form.FName.style.backgroundColor = "#FFCCCC";
    errors += "<li>Please enter your first name</li>";
}

It works. 有用。

Answer 2

It looks like it was an issue with my validation of the password field being more than X number of characters and my separate function that was validating the password1 and password2 matched. 我对密码字段的验证超过了X个字符，并且我的单独函数正在验证password1和password2匹配，这似乎是一个问题。

During testing, I removed the validation of the password minimum length and the rest of the form validation worked along with the password match function. 在测试期间，我删除了密码最小长度的验证，其余的表单验证与密码匹配功能一起使用。

Interesting. 有趣。

添加密码验证后，表单验证不起作用

问题描述

2 个解决方案

解决方案1
0 2015-09-27 17:46:09

解决方案2
0 已采纳 2015-09-28 00:52:42

添加密码验证后，表单验证不起作用

问题描述

2 个解决方案

解决方案1 0 2015-09-27 17:46:09

解决方案2 0 已采纳 2015-09-28 00:52:42

解决方案1
0 2015-09-27 17:46:09

解决方案2
0 已采纳 2015-09-28 00:52:42