2014-10-07 98 views
0

我有一個簡單的表單,正在驗證onchange並需要最終驗證onsubmit。我在錯誤的輸入框右側顯示一條消息。我試圖保持DOM 1兼容。提交的JavaScript表單驗證

HTML

<form id = "myForm" action = "" onsubmit = "return validateForm(this);"> 
       <table class = "table-submit" border = "0"> 
        <tr> 
         <td> 
          Username: 
         </td> 
         <td> 
          <input type = "text" id = "username" 
           size = "30" maxlength = "30" 
           onchange = "validateUsername(this, 'msgUsername')" /> 
         </td> 
         <td id = "msgUsername"> 
          &nbsp; 
         </td> 
        </tr> 
        <tr> 
         <td> 
          Password: 
         </td> 
         <td> 
          <input type = "password" id = "password" 
           size = "30" maxlength = "30" 
           onchange = "validatePassword(this, 'msgPassword')" /> 
         </td> 
         <td id = "msgPassword"> 
          &nbsp; 
         </td> 
        </tr> 
        <tr> 
        <td>&nbsp;</td> 
        <td> 
         &nbsp; 
         <input type = "submit" value = "Submit" /> 
         &nbsp; 
         <input type = "reset" value = "Clear" /> 
        </td> 
       </tr> 
       </table> 
</form> 

的JavaScript

function validateUsername(myItem, myElement) { 
var dom = document.getElementById(myElement); 

    if (myItem.value.length < 3) { 
     dom.innerHTML = " Username needs to be a minimum of 3 characters! "; 
     return false; 
    } 
    else { 
     dom.innerHTML = ""; 
     return true; 
    } 
} 

function validatePassword(myItem, myElement) { 
var dom = document.getElementById(myElement); 

    if (myItem.value.length < 5) { 
     dom.innerHTML = " Password needs to be a minimum of 5 characters! "; 
     return false; 
    } 
    else { 
     dom.innerHTML = ""; 
     return true; 
    } 
} 

function validateForm (itm) { 

    // kind of stuck here... 
} 

正如你可能注意到的,我堅持我的validateForm()函數位。 代碼驗證每個輸入框onchange事件。 不知道什麼是從這裏去的最佳途徑。我想過如果爲我的兩個單一輸入框驗證,但我需要發送每個參數,這是我試圖避免使用這個。 想要一些建議。

+0

http://jsfiddle.net/W4g4e/7/ – gibberish 2014-10-07 01:35:04

回答

0

單獨的問題。而不是驗證功能不僅驗證,而且還報告你的繪畫自己到一個角落。而是有一個驗證函數只返回true/false,另一個是onChange事件處理程序,它調用驗證函數並在需要時顯示錯誤消息。然後,您的onSubmit處理程序可以輕鬆地調用if/else塊中的驗證函數來允許或取消提交操作。

function validateUsername(username) { 
    return username.length >= 3; 
} 

function validatePassword(password) { 
    return password.length >= 5; 
} 

function showErrorFn(divId, message) { 
    var div = document.getElementById(divId); 
    message = " " + message; 
    return function(message) { 
    div.innerHTML = message; 
    }; 
} 

function makeChangeHandler(myItem, validationFn, errorFn) { 
    return function(e) { 
    if (validationFn(myItem.value)) { 
     return true; 
    } else { 
     errorFn(); 
     return false; 
    } 
    }; 
} 

function makeSubmitHandler(usernameEl, passwordEl) { 
    return function(e) { 
    if (validateUsername(usernameEl.value) && validatePassword(passwordEl.value)) { 
     return true; 
    } else { 
     e.preventDefault(); 
     return false; 
    } 
} 

var usernameEl = document.getElementById("username"); 
var usernameErrorEl = document.getElementById("msgUsername"); 
usernameEl.addEventListener("change", makeChangeHandler(
    usernameEl, 
    validateUsername, 
    showErrorFn("Username must be more then 3 characters") 
); 

var usernameEl = document.getElementById("password"); 
var usernameErrorEl = document.getElementById("msgPassword"); 
usernameEl.addEventListener("change", makeChangeHandler(
    usernameEl, 
    validatePassword, 
    showErrorFn("Password must be more then 5 characters") 
); 

var formEl = document.getElementById("myForm"); 
formEl.addEventListener("submit", makeSubmitHandler(usernameEl, password)); 
+0

這是偉大的,但我試圖保持它在DOM 1和的preventDefault()是DOM 2 +。 – Rick 2014-10-07 03:02:40

+0

然後刪除該行或將其封裝在「if」塊中。支持舊版瀏覽器的理由不應妨礙您閱讀和組合。 – Sukima 2014-10-07 03:05:39

+0

addEventListener()也是DOM 2+。 – Rick 2014-10-07 13:06:53

0

你可以試試這個...

function validateForm (itm) { 
    var flag = true; 
    flag = (validateUsername(itm.username, 'msgUsername') && flag); 
    flag = (validatePassword(itm.password, 'msgPassword') && flag); 

return flag; 
} 
+0

我不得不解決它的語法錯誤的原因:'返回(validateUsername(itm.username,「msgUsername」)&& validateUsername(itm.passwordword,「msgPassword」));'它工作,但只執行第一個驗證功能,而不是在這種情況下。 – Rick 2014-10-07 13:08:19

+0

我編輯了我的帖子,現在它會執行兩個驗證 – 2014-10-07 13:20:05