javascript复选框验证检查

Question

我的提示区足球游戏的复选框验证有问题。因此，如果用户喜欢提示游戏，他必须使用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

我们聊天聊天，看着这个。以下是我的解决方案，但首先......这个结构很糟糕。您只需一步即可完成验证和表单提交。我会把它分解成一个以上。从长远来看，它只会使调试/扩展更容易。我会先验证输入。保存到对象中。发送提交功能。然后提交给DB。现在正试图在一个函数中完成所有这些。无论如何....

问题是检查是否有输入的循环。当它找到第一个真实结果时，它将调用一个提交并退出该函数。

这就是为什么你可以输入2个字段，一个复选框和其他复选框，并且foundValid是真的。

我的修复是首先检查无效输入。将外部布尔值作为错误。如果它通过它提交。现在唯一的问题是空字段将返回真实条件并提交。检查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");
    }   
}