javascript复选框验证检查

Question

I have problem with my checkbox validation on my Tip Area Soccer Game. So if the user likes to tip a game, he must have to use 2 inputs field and the confirmation checkbock. But if the user uses 2 inputs fields and "more than one" confirmation checkbox, then he must get an alert error message. Because the right combination consists from "2 input fields + confimration checkbox" Here, in my screenshot you see the right combination for the green submit button:

And in the second screenshot you see the error combination:

I don't have any idea of how to code the alert for the error message on the display if the user uses the second combination.

Here's my Javascript code:

   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;
        }

And here my form code:

<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>

I hope someone have idea for this checking

Answer 1

We talked in chat, looked at this. Below is my solution but first... this is badly structured. You are doing validation and form submission in one step. I would break it up in to more then one. It just makes debugging/extension easier in the long run. I would validate inputs first. Save into object. Send to submit function. Then submit to DB. This right now is trying to do all that in one function. Anyway....

The problem is the loop for checking if there are inputs. When it finds the first true result it will call a submit and exit the function.

That's why you can input 2 fields, a checkbox and other checkboxes and foundValid is true.

My fix was to check for invalid input first. Have an outer boolean as an error. If it passes it submits. The only issue with it right now is empty fields will return a true condition and submit. Check the 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");
    }   
}