Javascript表单验证器功能无法正常工作

时间：2013-06-26 11:45:14

标签： javascript forms function validation

我一直在尝试让这个功能工作两个小时，但我无法找到错误的位置。

这是出乎意料的行为。

当填写表单中的任何字段时，表单将发布到php文件， 并且仅在所有字段都为空时显示错误（如预期），即5个错误。

但是当填写6个字段中的任何一个时，无论表单中的其他错误如何，都会发布表单。

请帮我验证此表格。

error是我将向用户显示的错误信息。 errors是找到的错误数。

JavaScript function 

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();">

请询问是否需要任何其他信息，代码或说明。

2 个答案:

答案 0 :(得分：3)

FIDDLE

您需要elementValue === "NULL"或elementValue == null

我放console.log代替提醒和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;
}

答案 1 :(得分：0)

首先，我计算以下字段：

  1. 第一名称
  2. 最后名称
  3. 电子邮件换注册
  4. 电话换注册
  5. 密码换注册
  6. 确认密码换注册
  7. 同意换注册

    8. 如果您使用绝对值做某事，以防万一。

    我已经构建了一个小的概念验证脚本，并且如果你没有id为#form_errors的元素，则会遇到这个脚本不起作用。这可能是你的问题吗？这样调用document.getElementById("form_errors")将导致未定义，函数将不会返回false。

    同样检查未定义的元素当然也适用于其他字段;）

相关问题
最新问题