title: Vue Form Validation Errors
body: <p>Im trying to create a form with validation using vue but Im currently encountering errors not defined errors but its currently defined.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;form class="add-comment custom-form" @submit="checkForm" action="/something" method="post" novalidate="true" id="booknow"&gt;
      &lt;fieldset&gt;
          &lt;label&gt;&lt;i class="fa fa-user-o"&gt;&lt;/i&gt;&lt;/label&gt;
          &lt;input type="text" placeholder="Your Name *" value="" v-model="name" id="name"/&gt;
          &lt;div class="clearfix"&gt;&lt;/div&gt;
          &lt;label&gt;&lt;i class="fa fa-envelope-o"&gt;&lt;/i&gt;  &lt;/label&gt;
          &lt;input type="text" placeholder="Email Address*" value="" v-model="email" id="email"/&gt;
      &lt;/fieldset&gt;
      &lt;button class="btn big-btn color-bg flat-btn"&gt;Book Now&lt;i class="fa fa-angle-right"&gt;&lt;/i&gt;&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>const app = new Vue({
    el:'#booknow',
    data:{
      errors:[],
      name:null,
      email:null,
    },
    methods:{
      checkForm:function(e) {
        this.errors = [];
        console.log("checkforms");
        if(!this.name) this.errors.push("Name required.");
        if(!this.email) {
          this.errors.push("Email required.");
        } else if(!this.validEmail(this.email)) {
          this.errors.push("Valid email required.");
        }
        if(!this.errors.length) return true;
        e.preventDefault();
      },
      validEmail:function(email) {
          var re = /^(([^&lt;&gt;()\[\]\\.,;:\s@"]+(\.[^&lt;&gt;()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
          return re.test(email);
      }
    } 
  })
  </code></pre>
  
  <p>[Vue warn]: Property or method "checkForm" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, </p>
  
  <p>vue.js:597 [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components</p>
  
  <p>[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components,</p>
  
  <p>[Vue warn]: Property or method "email" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components</p>
  
  <p>[Vue warn]: Property or method "email" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components</p>
  
  <p>[Vue warn]: Invalid handler for event "submit": got undefined</p>
  
  <p>Any suggestions on the problem?</p>