javascript復選框驗證檢查

Question

我的Tip Area Soccer Game的復選框驗證存在問題。 因此，如果用戶喜歡給小費游戲，則必須使用2個輸入字段和確認檢查框。 但是，如果用戶使用2個輸入字段和“多個”確認復選框，則他必須收到警報錯誤消息。 因為正確的組合是由“ 2個輸入字段+確認復選框”組成的 ，所以在我的屏幕快照中，您可以看到綠色的“提交”按鈕的正確組合：

在第二張屏幕截圖中，您會看到錯誤組合：

如果用戶使用第二種組合，我不知道如何在顯示屏上為錯誤消息編碼警報。

這是我的Javascript代碼：

   function chkAddTip(){

        var inputs = document.getElementById('AddTip').getElementsByTagName('input');

        // boolean flag
        var foundValid = false;

        // early exit the loop if at least one valid bet has been found
        for (var i = 0; i < inputs.length && !foundValid; i += 3){
            if (inputs[i].type !== "submit" && (inputs[i].value && inputs[i + 1].value && inputs[i + 2].checked)) {
                // set the flag to true when a valid bet is found
                foundValid = true;
            }
        }

        // determine the return value depending on the flag
        if (foundValid) {
            return true;
        }
        else {
            alert("Bitte deinen Tipp und die Bestättigung abgeben.")
            inputs[0].focus();
            return false;
        }

這是我的表單代碼：

<form action="Ctipservlet" id="AddTip" onsubmit="return chkAddTip()" method="POST">
    <div id="inhalt"><h1>Tip Area</h1>
    <table>
        <tbody>
            <tr>
               <th>Playdate</th> 
               <th>Playtime</th> 
               <th>Games</th>
               <th>Your Tip</th>
               <th>Confirmation</th>
            </tr>
            <tr>
               <td>21.07.</td>
               <td>19:30 Uhr</td>
               <td>Schalke - Bayern</td>
               <td><input style="width:30px!important; text-align: center;" type="text" name="team_a0" maxlength="2" size="2">:<input style="width:30px!important; text-align: center;" type="text" name="team_b0" maxlength="2" size="2"></td>
               <td><input type="checkbox" name="check0"></td>
            </tr>
            <tr>
               <td>22.07.</td>
               <td>20:30 Uhr</td>
               <td>Dortmund - Leverkusen</td>
               <td><input style="width:30px!important; text-align: center;" type="text" name="team_a1" maxlength="2" size="2">:<input style="width:30px!important; text-align: center;" type="text" name="team_b1" maxlength="2" size="2"></td>
               <td><input type="checkbox" name="check1"></td>
           </tr>
           <tr>
               <td>23.07.</td>
               <td>15:30 Uhr</td>
               <td>Wolfsburg - Nürnberg</td>
               <td><input style="width:30px!important; text-align: center;" type="text" name="team_a2" maxlength="2" size="2">:<input style="width:30px!important; text-align: center;" type="text" name="team_b2" maxlength="2" size="2"></td>
               <td><input type="checkbox" name="check2"></td>
           </tr>
       </tbody>
    </table>
    <input class="button_green" type="submit" name="tip" value="Submit Tip">
    <input class="button_blue" onclick="this.form.onsubmit = null" type="submit" name="back" value="Back">
    </div>
</form>

我希望有人對此檢查有想法

Answer 1

我們在聊天中交談，看着這個。 下面是我的解決方案，但首先...結構不正確。 您只需一步即可完成驗證和表單提交。 我將其分解為多個。 從長遠來看，它只會使調試/擴展變得更容易。 我將首先驗證輸入。 保存為對象。 發送提交功能。 然后提交給數據庫。 現在，此功能正在嘗試在一個功能中完成所有操作。 無論如何....

問題是檢查是否有輸入的循環。 當找到第一個真實結果時，它將調用一個提交並退出該函數。

這就是為什么您可以輸入2個字段，一個復選框和其他復選框，並且foundValid為true的原因。

我的解決方法是先檢查輸入是否無效。 將外部布爾值作為錯誤。 如果通過，則提交。 現在唯一的問題是空白字段將返回真實條件並提交。 檢查JS小提琴http://jsfiddle.net/Komsomol/EDdUU/4/

var error = false;
var results = [];

function chkAddTip() {
    var inputs = document.getElementById('AddTip').getElementsByTagName('input');
    console.log(inputs);

    // early exit the loop if at least one valid bet has been found
    for (var i = 0; i < inputs.length; i += 3) {

        if (!inputs[i].value && !inputs[i + 1].value && inputs[i + 2].checked) {
            console.log("inputs inputed wrong!");
            error = true;
        } else {
           results.push(inputs[i].value,inputs[i + 1].value,inputs[i + 2].checked);
        }
    }    
    submit();
}

function submit(){
    console.log(results, error);
    if(error == true){
        alert("error in inputs");
    } else {
        alert("posting to server");
    }   
}