Vue Form Validation Errors

Question

Im trying to create a form with validation using vue but Im currently encountering errors not defined errors but its currently defined.

HTML

<form class="add-comment custom-form" @submit="checkForm" action="/something" method="post" novalidate="true" id="booknow">
    <fieldset>
        <label><i class="fa fa-user-o"></i></label>
        <input type="text" placeholder="Your Name *" value="" v-model="name" id="name"/>
        <div class="clearfix"></div>
        <label><i class="fa fa-envelope-o"></i>  </label>
        <input type="text" placeholder="Email Address*" value="" v-model="email" id="email"/>
    </fieldset>
    <button class="btn big-btn color-bg flat-btn">Book Now<i class="fa fa-angle-right"></i></button>
</form>

Javascript

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 = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\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);
    }
  } 
})

[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,

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

[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,

[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

[Vue warn]: Invalid handler for event "submit": got undefined

Any suggestions on the problem?

wobsoriano wobsoriano · Accepted Answer · 2018-06-27T06:10:28

Make a div and move your booknow id on that div.

<div id="booknow">
    <form class="add-comment custom-form" @submit="checkForm" action="/something" method="post" novalidate="true">
        <fieldset>
            <label><i class="fa fa-user-o"></i></label>
            <input type="text" placeholder="Your Name *" value="" v-model="name" id="name"/>
            <div class="clearfix"></div>
            <label><i class="fa fa-envelope-o"></i>  </label>
            <input type="text" placeholder="Email Address*" value="" v-model="email" id="email"/>
        </fieldset>
        <button class="btn big-btn color-bg flat-btn">Book Now<i class="fa fa-angle-right"></i></button>
    </form>
</div>

Vue Form Validation Errors

1 Answers