jQuery stop script execution after if condition within click event

Question

In this table, the rows are selectable only when Approved? column is empty. User can also add text in Deny Reason column.

When Deny button clicked, I want to make sure all deny reasons are filled in all selected rows before the rest of action can be executed. I tried to use return false , e.stopPropagation() , e.stopImmediatePropagation() and none of those works. As you can see in my example, alert("test") will always be executed. I want to stop that. Could you help?

$(function() {

    var table = $("#myDataTable").DataTable({
        info: false,
        paging: false,
        searching: false,
        sorting: false
    });

    $("#myDataTable tbody").on('click', 'tr', function() {
        var tr = $(this).closest("tr");
        var rowText = tr.children("td").text();
        var approveDeny = tr.children("td:nth-child(2)").text();

        if (approveDeny == "") {
            $(this).toggleClass('selected');
        }
    });

    $("#myDataTable tbody tr td:nth-child(4)").click(function(e) {
        if ($(this).prev().prev().text() == "") {
            var text = $(this).text();
            $(this).text('');
            $('<textarea />').appendTo($(this)).val(text).select().blur(function() {
                var newText = $(this).val();
                var parentCell = $(this).parent();
                parentCell.find('textarea').remove();
                table.cell(parentCell).data(newText).draw();
            });
        }
        e.stopPropagation();
    });

    $("#btnDeny").click(function(e) {
        table.cells('.selected',3).every(function(rowIdx, tableLoop, rowLoop) {        	
            var data = this.data();
            if(data == "") {            	
            	alert( rowIdx + " is empty, you have to fill it.");
              return false;
            }
            console.log(data);
        });        
        alert("test");
    });


});

<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<table id="myDataTable" class="table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Approved?</th>
            <th>Date</th>
            <th>Deny Reason</th>
        </tr>
    </thead>
    <tbody>
        <tr id="1">
            <td>Mickey Mouse</td>
            <td>Yes</td>
            <td>1/1/2016</td>
            <td></td>
        </tr>
        <tr id="2">
            <td>Minnie Mouse</td>
            <td></td>
            <td>1/3/2016</td>
            <td></td>
        </tr>
        <tr id="3">
            <td>Donald Duck</td>
            <td></td>
            <td>1/5/2016</td>
            <td></td>
        </tr>
    </tbody>
</table>
<br/>
<div>
    <input type="button" id="btnApprove" value="Approve">
    <input type="button" id="btnDeny" value="Deny">
</div>

Answer 1

You can use a variable outside of the scope of your inner .every() function and change it within that function so you know if the data is valid or not.

$("#btnDeny").click(function(e) { // Outer scope function 
    var valid = true;
    table.cells('.selected',3).every(function(rowIdx, tableLoop, rowLoop) { // inner scope function     
        var data = this.data();
        if(data == "") { 
            valid = false;
            alert( rowIdx + " is empty, you have to fill it.");
        }
    });
    if (valid)
        alert("Data valid");
});

Answer 2

Right, you need to assign the boolean output of every() to a variable, and then execute your alert only if that variable is true. Right now the result of the every() call is ignored, and the alert is executed regardless. Something like:

var isValid = table.cells('.selected',3).every(function(rowIdx, tableLoop, rowLoop) {
    var data = this.data();
    if(data == "") {                
        alert( rowIdx + " is empty, you have to fill it.");
        return false;
    }
    console.log(data);
});
if (isValid) {
    alert("test");
}