How to stop triggering other function if validation function throws error while submitting html form using jQuery and html?

Question

I created simple html page with table and form using jQuery and html.

The layout of this form is

This code works perfectly fine.I have declare two function in this html page using jQuery. One function check validation while giving input for empty field in form while other function insert form data inside table by submitting form. Problem is both function triggers at same time while submitting form due to which if I give empty field in form and click submit.It throws error "This field is required" but still data is inserted inside table with empty row like this :

I want to adjust code in such a way that if validation function throws error "This field is required ",Other function should not be triggered i.e Form data should not insert in table with empty row.

$(document).ready(function() {
  $('#first_form').submit(function(e) {
    e.preventDefault();
    var given_task = $('#given_task').val();
    var description_val = $('#description_val').val();
    $(".error").remove();
    if (given_task.length < 1) {
      $('#given_task').after('<span class="error">This field is required</span>');
    }
    if (description_val.length < 1) {
      $('#description_val').after('<span class="error">This field is required</span>');
    }
  });
});
$(document).ready(function() {
  $('#first_form').submit(feedTable);

  function feedTable(e) {
    e.preventDefault();
    if (!this.snNo) this.snNo = 1;
    var task = $('#given_task').val(),
      yes = $('#yes:checked').val(),
      no = $('#no:checked').val(),
      desc = $('input[name="description"]').val(),
      type = $('#ttype').val();

    var comp = yes ? 'yes' : 'no';

    $('#record').append(
      "<tr><td>" + this.snNo + "</td>" +
      "<td>" + task + "</td>" +
      "<td>" + desc + "</td>" +
      "<td>" + comp + "</td>" +
      "<td>" + type + "</td></tr>"
    )
    this.snNo += 1;
  }
});

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: #b8c6dd;
}

.right {
  right: 0;
  background-color: #dce0d9;
}

table {
  font-family: Arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

input[type=text],
select {
  width: 50%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.error {
  color: red;
  margin-left: 5px;
}

label.error {
  display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="split left">
  <center>
    <h2>Employee Task Record</h2>
  </center>
  </body>
  
  <table id='record'>
    <tr>
      <th>S.N</th>
      <th>Task</th>
      <th>Description</th>
      <th>Complete</th>
      <th>Type</th>
    </tr>
  </table>
</div>
<div class="split right">
  <center>
    <form id="first_form" method="post" action="">
      Given Task : <input type="text" id="given_task" name="task" value="">
      <br><br> Description: <input type="text" id="description_val" name="description" value=""><br>
      <br> Complete: <input type="radio" id='yes' name="taskDone" value="yes" checked> Yes
      <input type="radio" name="taskDone" id='no' value="no"> No<br> <br> Task Type:
      <select id='ttype'>
        <option value="regular">Regular</option>
        <option value="Meeting">Meeting</option>
        <option value="coding">Coding</option>
        <option value="documentation">Documentation</option>
        <option value="support">Support</option>
      </select> <br> <br>
      <input type="submit" onclick="" value="submit" button class="button">
    </form>
  </center>
</div>

Answer 1

Just check if both are not empty then append that table.

Here is the working fiddle

var given_task = $('#given_task').val();
 var description_val = $('#description_val').val();
if(given_task.length > 0 && description_val.length > 0){
$('#record').append(
   "<tr><td>"+this.snNo+"</td>"+
   "<td>"+task+"</td>"+
   "<td>"+desc+"</td>"+
   "<td>"+comp+"</td>"+
   "<td>"+type+"</td></tr>"
  );
    }

Answer 2

The best practice for you to take a bool value and check it while submitting the form. True its value when any field is empty. The following code will works for you

<script>
        $(document).ready(function () {
            var isError = false;
            $('#first_form').submit(function (e) {
                e.preventDefault();
                var given_task = $('#given_task').val();
                var description_val = $('#description_val').val();
                $(".error").remove();
                if (given_task.length < 1) {
                    isError = true;
                    $('#given_task').after('<span class="error">This field is required</span>');
                }
                if (description_val.length < 1 && !isError) {
                    isError = true;
                    $('#description_val').after('<span class="error">This field is required</span>');
                }
            });
        });
            </script>
                    <script>
                        $(document).ready(function () {
                            if (!isError) {
                                $('#first_form').submit(feedTable);
                                function feedTable(e) {
                                    e.preventDefault();
                                    if (!this.snNo) this.snNo = 1;
                                    var task = $('#given_task').val(),
                                        yes = $('#yes:checked').val(),
                                        no = $('#no:checked').val(),
                                        desc = $('input[name="description"]').val(),
                                        type = $('#ttype').val();

                                    var comp = yes ? 'yes' : 'no';

                                    $('#record').append(
                                        "<tr><td>" + this.snNo + "</td>" +
                                        "<td>" + task + "</td>" +
                                        "<td>" + desc + "</td>" +
                                        "<td>" + comp + "</td>" +
                                        "<td>" + type + "</td></tr>"
                                    )
                                    this.snNo += 1;
                                }
                            }
                        });
                            </script>