Exit not only from child function but from whole parent function

Question

Short

What I want to do is following: At first, function validate() must check all inputs one by one: if they are not empty (or whitespaced) then move to if statement (for checking radio buttons) But if some of inputs empty then stop whole validate function and focus on empty input.

Here is result: http://jsfiddle.net/tt13/y53tv/4/

Just press ok button, you'll see that it finished first function and fires if too. But I want to exit from whole validate() function in case there is empty field, not only from each() function

Detailed

JS

function validate() {
    $('.var_txt').each(function() {
        if ($.trim($(this).val()) == '') {
            $(this).focus();
            return false;
        }
    });

    if (!$(".answer:checked").val()) {
        alert("boom");
        return false;
    }
    return true;
}
$(document).ready(function() {
    $("#add_question").submit(function(e) {
        if (validate()) {
            alert("good");
        }
        e.preventDefault();
    })
});​

HTML Markup

 <form id="add_question" method="post" action=""> 
 <table>

                  <tr>

                    <td class="var_label">

                      <input class="answer" type="radio" name="answer" value="a" /> a)

                    </td>

                    <td>

                      <input type="text" class="var_txt" name="var_a" />

                    </td>

                  </tr>

                  <tr>

                    <td class="var_label">

                      <input class="answer" type="radio" name="answer" value="b" /> b)

                    </td>

                    <td>

                      <input type="text" class="var_txt" name="var_b" />

                    </td>

                  </tr>

                  <tr>

                    <td class="var_label">

                      <input class="answer" type="radio" name="answer" value="c" /> c)

                    </td>

                    <td>

                      <input type="text" class="var_txt" name="var_c" />

                    </td>

                  </tr>

                  <tr>

                    <td class="var_label">

                      <input class="answer" type="radio" name="answer" value="d" /> d)

                    </td>

                    <td>

                      <input type="text" class="var_txt" name="var_d" />

                    </td>

                  </tr>

                  <tr>

                    <td class="var_label">

                      <input class="answer" type="radio" name="answer" value="e" /> e)

                    </td>

                    <td>

                      <input type="text" class="var_txt" name="var_e" />

                    </td>

                  </tr>

                </table>
<input type="submit" name="submit" value="ok" />

</form>

Solution 1

Add a flag that has to be false to continue.

function validate() {
    var invalid = false;
    $('.var_txt').each(function() {
        if ($.trim($(this).val()) == '') {
            $(this).focus();
            invalid = true;
            return false;
        }
    });
    if (invalid) {
        return false;
    }

    if (!$(".answer:checked").val()) {
        alert("boom");
        return false;
    }
    return true;
}
$(document).ready(function() {
    $("#add_question").submit(function(e) {
        if (validate()) {
            alert("good");
        }
        e.preventDefault();
    })

});​

Solution 2

We can break the $.each() loop at a particular iteration by making the callback function return false. Returning non-false is the same as a continue statement in a for loop; it will skip immediately to the next iteration.

Set a flag at the beginning of your validation: var broken = false;. Inside the each, just before return false;, add broken = true;. Then after your each code add if( broken) return false;

Solution 3

Like that?

function validate() {
    var pass = true;
    $('.var_txt').each(function() {
        if ($.trim($(this).val()) == '') {
            $(this).focus();
            pass = false;
            return false;
        }
    });

    if (!$(".answer:checked").val()) {
        alert("boom");
        pass = false;
        return false;
    }
    return pass;
}

Add a variable that checks if the conditions are true.