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 Fiddle 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");
    }   
}