JavaScript表单验证函数无法正常工作

Question

我已经试图让这个函数工作了两个小时，但是找不到错误在哪里。

这个行为很出乎意料。

当表单中的任何一个字段被填写时，表单会被提交到php文件，并且只有在所有字段都为空时（即5个错误），才会显示错误。

但是当6个字段中的任何一个被填写时，表单会被提交，而不管表单中的其他错误。

请帮助我验证这个表单。

error是我将向用户显示的错误信息。 errors是发现的错误数量。

JavaScript函数

function formValidator(){

    var elementValue = document.getElementById("first-name").value;
    var elementName = document.getElementById("first-name");
    var errors = 0;
    var error = " ";

    if (elementValue == "" || elementValue == " " || elementValue== NULL){
        error = "First Name shouldn't be left empty.";
        errors = 1;
    }

    var elementValue = document.getElementById("last-name").value;
    var elementName = document.getElementById("last-name");

    if (elementValue == "" || elementValue == " " || elementValue== NULL){
        if (errors == 0){
            error = "Last Name shouldn't be left empty.";
        }
        else{
            error += "<br>Last Name shouldn't be left empty.";
        }
        errors+=1;
    }
    var elementValue = document.getElementById("email-for-registration").value;
    var elementName = document.getElementById("email-for-registration");
    var email_err = "false";
    if (elementValue == "" || elementValue == " " || elementValue== NULL){
        email_err = "true";
    }
    var elementValue = document.getElementById("phone-for-registration").value;
    if ((elementValue == "" || elementValue == " " || elementValue== NULL) && email_err == "true"){
        if (errors == 0){
            error = "Both email and contact cannot be left empty.";
        }
        else{
            error += "<br>Both email and contact cannot be left empty.";
        }
        errors+=1;
    }
    var elementValue = document.getElementById("password-for-registration").value;
    var elementName = document.getElementById("password-for-registration");
    if (elementValue == "" || elementValue == " " || elementValue== NULL){
        if (errors == 0){
            error = "Password shouldn't be left empty.\nSelect a strong password atleast 6 characters long.";
        }
        else{
            error += "<br>Password shouldn't be left empty.Select a strong password atleast 6 characters long.";
        }
        errors+=1;
    }
    else if (elementValue.length<6){
        if (errors == 0){
            error = "Password less than 6 characters aren't allowed for security reasons.";
        }
        else{
            error += "<br>Password less than 6 characters aren't allowed for security reasons.";
        }
        errors+=1;
    }
    email_err = document.getElementById("confirm-password-for-registration").value;
    var elementName = document.getElementById("confirm-password-for-registration");
    if (elementValue != email_err){
        if (errors == 0){
            error = "The password to confirm doesn't match with your desired password.";
        }
        else{
            error += "<br>The password to confirm doesn't match with your desired password.";
        }
        errors+=1;
    }
    var elementValue = document.getElementById("agreed-for-registration");
    var elementName = document.getElementById("agreed-for-registration");
    if (!elementValue.checked){
        if (errors == 0){
        error = "Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue.";
         document.getElementById("agreed-for-registration").focus();
        }
        else{
            error += "<br>Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue.";
        }
        errors+=1;
    }


    alert(errors);

    if (errors > 1){
        document.getElementById("form_errors").innerHTML = "<h4 style='color:red;'>Please remove the following errors from form to continue.</h4>";
        document.getElementById("form_errors").innerHTML += "<h5>" + error + "</h5><br>";
        return false;
    } else if (errors == 1){
        alert(error);
        elementName.focus();
        return false;
    } else if (errors == 0){
        return true;
    }
    return false;
}

在这里调用了函数。

<form name="registration" class="deco_blu_form" action="<?=$base_url;?>forms/confirm-registration/members.php" method="post" onsubmit="return formValidator();">

如果需要其他信息、代码或解释，请提出。

- Optimus Prime

---

@Sergio 是的，但是正如我所说，只有在所有字段都为空时，我才会得到5个错误。否则什么也没有。 - Optimus Prime

我在想，你使用NULL而不是null是否是问题所在。 - RobH

不要依赖客户端验证。 - php_nub_qq

不要每次重新分配elementValue和elementName变量时都使用var。 - rosscj2533

@optim - 实际上，你可以考虑将你的工作代码发布到codereview.stackexchange.com上 - 这样你可以得到一些有关编码风格的有用反馈。 - RobH

Answer 1

FIDDLE

你需要满足 elementValue === "NULL" 或者 elementValue == null

我使用了 console.log 替代 alert，使用 onblur 触发事件只是为了更容易进行调试。

因此完整的代码如下：

function formValidator() {

var elementValue = document.getElementById("first-name").value;
var elementName = document.getElementById("first-name");
var errors = 0;
var error = " ";

if (elementValue == "" || elementValue == " " || elementValue === "NULL") {
    error = "First Name shouldn't be left empty.";
    errors = 1;
}

var elementValue = document.getElementById("last-name").value;
var elementName = document.getElementById("last-name");

if (elementValue == "" || elementValue == " " || elementValue === "NULL") {
    if (errors == 0) {
        error = "Last Name shouldn't be left empty.";
    } else {
        error += "<br>Last Name shouldn't be left empty.";
    }
    errors += 1;
}
var elementValue = document.getElementById("email-for-registration").value;
var elementName = document.getElementById("email-for-registration");
var email_err = "false";
if (elementValue == "" || elementValue == " " || elementValue === "NULL") {
    email_err = "true";
}
var elementValue = document.getElementById("phone-for-registration").value;
if ((elementValue == "" || elementValue == " " || elementValue === "NULL") && email_err == "true") {
    if (errors == 0) {
        error = "Both email and contact cannot be left empty.";
    } else {
        error += "<br>Both email and contact cannot be left empty.";
    }
    errors += 1;
}
var elementValue = document.getElementById("password-for-registration").value;
var elementName = document.getElementById("password-for-registration");
if (elementValue == "" || elementValue == " " || elementValue === "NULL") {
    if (errors == 0) {
        error = "Password shouldn't be left empty.\nSelect a strong password atleast 6 characters long.";
    } else {
        error += "<br>Password shouldn't be left empty.Select a strong password atleast 6 characters long.";
    }
    errors += 1;
} else if (elementValue.length < 6) {
    if (errors == 0) {
        error = "Password less than 6 characters aren't allowed for security reasons.";
    } else {
        error += "<br>Password less than 6 characters aren't allowed for security reasons.";
    }
    errors += 1;
}
email_err = document.getElementById("confirm-password-for-registration").value;
var elementName = document.getElementById("confirm-password-for-registration");
if (elementValue != email_err) {
    if (errors == 0) {
        error = "The password to confirm doesn't match with your desired password.";
    } else {
        error += "<br>The password to confirm doesn't match with your desired password.";
    }
    errors += 1;
}
var elementValue = document.getElementById("agreed-for-registration");
var elementName = document.getElementById("agreed-for-registration");
if (!elementValue.checked) {
    if (errors == 0) {
        error = "Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue.";
        document.getElementById("agreed-for-registration").focus();
    } else {
        error += "<br>Please go through our <a href=''>Terms and Conditions</a>, and make sure you agree to continue.";
    }
    errors += 1;
}


console.log(errors)

if (errors > 1) {
    document.getElementById("form_errors").innerHTML = "<h4 style='color:red;'>Please remove the following errors from form to continue.</h4>";
    document.getElementById("form_errors").innerHTML += "<h5>" + error + "</h5><br>";
    return false;
} else if (errors == 1) {
    alert(error);
    elementName.focus();
    return false;
} else if (errors == 0) {
    return true;
}
return false;
}

- Sergio

Answer 2

首先，我数一下以下字段：

1. 名字
2. 姓氏
3. 注册邮箱
4. 注册电话
5. 注册密码
6. 确认注册密码
7. 同意注册条款

以防你对绝对值做了什么。

我已经建立了一个小的概念证明脚本，并发现如果没有一个带有id #form_errors的元素，这个脚本将无法工作。这可能是你的问题吗？这样，对于document.getElementById("form_errors")的调用将导致未定义，并且该函数将不会返回false。

当然，对于其他字段也要进行未定义元素的检查；）

- contradictioned

---

抱歉，我已经解决了。非常感谢您的努力。 - Optimus Prime