javascript onsubmit函數不適用於兩個輸入字段

Question

我試圖在不使用html5驗證作為類練習的情況下驗證表單，但是我無法終生解決。

如果電子郵件和/或名稱無效/空，我想彈出警報消息。

我已經到達要從電子郵件或名稱字段彈出警報的地步，具體取決於onsubmit函數中的第一個。

任何想法將不勝感激！

document.getElementById("frmContact").onsubmit = function() {

    var inputEmail= document.getElementById("email").value,
        emailPattern = new RegExp("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$");
    if (inputEmail==="") {
        alert("Please enter your email.")
        return false;
    } else if (!emailPattern.test(inputEmail)){
        alert("Please enter a valid email address.");
        return false;
    } else {
        return true;
    };

    var inputName= document.getElementById("name").value,
        namePattern = new RegExp("^[A-Za-z]+$");
    if (inputName==="") {
        alert("Please enter your name.")
        return false;
     } else if (!namePattern.test(inputName)){
        alert("Please enter a valid name.");
        return false;
    } else {
    return true;
    };
};

Answer 1

您在第一個字段通過驗證后return ，因此從不檢查第二個字段。 取而代之的是，將一個局部變量默認設置為true，然后將兩個字段中的任何一個均設置為false失敗驗證，然后在最后將其返回。

    var valid = true;
    // ...
    if(inputEmail==="") {
        alert("Please enter your email.");
        valid = false;
    // ...

    return valid;
};

Answer 2

也許這行不通，但是這個概念可能是這樣的……

document.getElementById("frmContact").onsubmit = function() {

    var inputEmail= document.getElementById("email").value,
        emailPattern = new RegExp("^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$"),
        error = [],
        i = 0;

    if (inputEmail==="") {
        error.push("Please enter your email");
    } else if (!emailPattern.test(inputEmail)){
        error.push("Please enter a valid email address.");
    } 

    var inputName= document.getElementById("name").value,
        namePattern = new RegExp("^[A-Za-z]+$");
    if (inputName==="") {
        error.push("Please enter your name.")
     } else if (!namePattern.test(inputName)){
        error.push("Please enter a valid name.");
    } 

    if(typeof error !== 'undefined' && error.length > 0){
        alert("you submit the form correctly");
    } else {
        for(i = 0; i < error.length; i + 1){
            alert(error[i]);
        }
    }
};