title: HTML form validation on click of submit button
body: <p>I am trying to create a HTML form and on my submit button, it must validate if all the fields are filled and then it must append the details to the table displayed below. But while validating the form, i am not able to get why it is adding data to table even if all the details are filled correctly</p>
  
  <p>Below is code in use : </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Assignment&lt;/title&gt;
      &lt;style&gt;
       table{
         width: 100%;
         margin: 25px 0;
         border-collapse: collapse;
       }
       table, th, td{
         border: 1px solid #6C220B;
       }
       table th, table td{
         padding: 8px;
         text-align: left;
       }
    &lt;/style&gt;
      &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
              &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
                  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
                  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
              &lt;/head&gt;
              &lt;body&gt;
                  &lt;div class="container"&gt;
                      &lt;h1&gt;Assignment on Javascript and Jquery:&lt;/h1&gt;
                      &lt;h2&gt;Details form :&lt;/h2&gt;
                      &lt;form action="#" method="post" name="form"&gt;
                          &lt;div class="form-group" required&gt;
                              &lt;label for="First Name"&gt;First Name:&lt;/label&gt;
                              &lt;input type="text" class="form-control" id="fn" placeholder="Enter your first name" name="firstname" required="" &gt;
                              &lt;/div&gt;
                              &lt;div class="form-group"&gt;
                                  &lt;label for="Last Name"&gt;Last Name:&lt;/label&gt;
                                  &lt;input type="text" class="form-control" id="sn" placeholder="Enter your last name" name="lastname" required="" &gt;
                                  &lt;/div&gt;
                                  &lt;div class="form-group"&gt;
                                      &lt;label for="Date of birth"&gt;Date of birth:&lt;/label&gt;
                                      &lt;input type="date" class="form-control" id="dob" placeholder="Enter your date of birth" name="dateofbirth" required="" &gt;
                                      &lt;/div&gt;
                                      &lt;div class="form-group"&gt;
                                          &lt;label for="email"&gt;Email:&lt;/label&gt;
                                          &lt;input type="email" class="form-control" id="em" placeholder="Enter your email id" name="email" required="" &gt;
                                          &lt;/div&gt;
                                          &lt;div class="form-group"&gt;
                                              &lt;label for="Phone Number"&gt;Phone Number:&lt;/label&gt;
                                              &lt;input type="text" class="form-control" id="phn" placeholder="Enter your phone number" name="phonenumber" required="" &gt;
                                              &lt;/div&gt;
                                              &lt;input type="submit" class="row" value="Click to Add Row"&gt;
                                              &lt;/form&gt;
                                              &lt;br&gt;
                                                  &lt;h2&gt;The table of data :&lt;/h2&gt;
                                                  &lt;table class="table"&gt;
                                                      &lt;thead&gt;
                                                          &lt;tr&gt;
                                                              &lt;th&gt;Firstname&lt;/th&gt;
                                                              &lt;th&gt;Lastname&lt;/th&gt;
                                                              &lt;th&gt;Date of birth&lt;/th&gt;
                                                              &lt;th&gt;Email&lt;/th&gt;
                                                              &lt;th&gt;Phone Number&lt;/th&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/thead&gt;
                                                      &lt;tbody&gt;
                                                          &lt;tr&gt;
                                                              &lt;td&gt;Durai&lt;/td&gt;
                                                              &lt;td&gt;Saravanan&lt;/td&gt;
                                                              &lt;td&gt;16/01/1996&lt;/td&gt;
                                                              &lt;td&gt;durairaj1696@gmail.com&lt;/td&gt;
                                                              &lt;td&gt;9789879736&lt;/td&gt;
                                                          &lt;/tr&gt;
                                                      &lt;/tbody&gt;
                                                  &lt;/table&gt;
                                              &lt;/div&gt;
                                              &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
                                              &lt;script&gt;
       function validateForm() {
              var isValid = true;
          $('.form-group').each(function() {
             if ( $(this).val() === '' )
               isValid = false;
              });
        return isValid;
        }
  
       $(document).ready(function(){
  
           $(".row").click(function(){
  
               var firstname = $("#fn").val();
  
               var lastname = $("#sn").val();
  
               var dob = $("#dob").val();
  
               var email = $("#em").val();
  
               var phonenumber = $("#phn").val();
  
               var markup = "
                                                  &lt;tr&gt;
                                                      &lt;td&gt;" + firstname + "&lt;/td&gt;
                                                      &lt;td&gt;" + lastname + "&lt;/td&gt;
                                                      &lt;td&gt;" + dob + "&lt;/td&gt;
                                                      &lt;td&gt;" + email + "&lt;/td&gt;
                                                      &lt;td&gt;" + phonenumber + "&lt;/td&gt;
                                                  &lt;/tr&gt;";
  
            if(validateForm())
             {
  
               $("table tbody").append(markup);
  
             }
           });         
       });    
  
  
                                              &lt;/script&gt;
                                          &lt;/body&gt;
                                      &lt;/html&gt;
  </code></pre>