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>

Your HTML in not valid. You have a </body> floating around — mplungjan
– mplungjan, Commented Nov 2, 2018 at 10:55

Sudharshan Nair · Accepted Answer · 2018-11-02 11:10:11Z

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

edited Nov 2, 2018 at 11:10

answered Nov 2, 2018 at 10:44

Sudharshan Nair

1,2771 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hamza Haider · Accepted Answer · 2018-11-02 10:52:52Z

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>

Your code works perfect but if I add give valid data in form without any error,form data doesn't append i.e data don't get add in table.
@suman your html is not valid even your submit button is not displaying although nothing has been changed in append function i just added true and false check on certain condition. Your code is same for append.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related