2013-06-26 74 views
4

我一直在試圖使此功能現在工作兩個小時,但無法找到錯誤所在。Javascript表單驗證器功能無法正常工作

這表現出乎意料。

當表單中的任何一個字段被填充後,表單將被髮布到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();"> 

請詢問是否需要任何其他信息,代碼或解釋。

+0

你得到了'警報(錯誤);'? – Sergio

+0

@Sergio是的,但正如我所說只有當所有的領域都是空的,我得到5個錯誤。否則沒有。 –

+4

我不知道你使用'NULL'而不是'null'是否是問題。 – RobH

回答

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; 
} 
0

起初,我算以下字段:

  1. 直呼其名
  2. 最後名稱
  3. 電子郵件的註冊
  4. 電話進行登記
  5. 密碼爲 - 註冊
  6. confirm-password-for-registration
  7. 議定註冊

以防萬一,如果你做的絕對值的東西。

我已經構建了一個小概念驗證腳本,並且遇到這個腳本不起作用,如果你沒有一個id爲#form_errors的元素。這可能是你的問題嗎?通過這種方式調用document.getElementById("form_errors")會導致未定義,並且該函數不會返回false

當然未定義的元素相同的檢查適用於其他領域,太;)

+0

對不起,我有他們。感謝您的努力。我有解決方案。 –