title: Why still adding even with validation form?
body: <p>When I click the button on my modal with an empty field on my input its give me an undefined value on my console. And when I put a value on my input and click the button it is adding to my database. The problem is even the empty field or the undefined value are also adding to my database and the sweetalert is not working. I want to prevent the empty field adding to my database and prevent the undefined. Can somebody help me?</p>
  
  <pre><code>            //start of method
       checkForm: function(e) {
            if (this.category_description) {
              return true;
            }
  
            this.errors = [];
  
            if (!this.category_description) {
              this.errors.push('Category required.');
            }
            e.preventDefault();
          },
  
        addCategory : function() {
          axios({
              method : "POST",
              url : this.urlRoot + "category/add_category.php",
              data : {
                  description : this.category_description
              }
          }).then(function (response){
              vm.checkForm(); //for FORM validation
              vm.retrieveCategory();
              console.log(response);
              swal("Congrats!", " New category added!", "success");   
              vm.clearData();
          }).catch(error =&gt; {
              console.log(error.response);
          });
      },
       //end of method
  
       &lt;form id="vue-app" @submit="checkForm"&gt;
      &lt;div class="modal" id="myModal" &gt; &lt;!-- start add modal --&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content " style="height:auto"&gt;
  
                  &lt;!-- Modal Header --&gt;
                  &lt;div class="modal-header"&gt;
                    &lt;h4 class="modal-title"&gt; Add Category &lt;/h4&gt;
                    &lt;button @click="clearData" type="button" class="close" data-dismiss="modal"&gt;&lt;i class="fas fa-times"&gt;&lt;/i&gt;&lt;/button&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Modal body --&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div class="col-lg-12"&gt;
                              &lt;input type="text" class="form-control" id="category_description" name="category_description" v-model="category_description" placeholder="Enter Description"&gt;
                              &lt;p v-if="errors.length"&gt;
                                  &lt;span v-for="error in errors"&gt; {{ error }} &lt;/span&gt;
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
  
  
                  &lt;!-- Modal footer --&gt;
                  &lt;div class="modal-footer"&gt;
                    &lt;button type="submit"@click="category_description !== undefined ? addCategory : ''" class="btn btn-primary"&gt; Add Category &lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  </code></pre>