title: How to call validate method of Element-UI form
body: <p>I'm trying design some forms with <a href="http://element.eleme.io/#/en-US/component/form" rel="nofollow noreferrer">Element-UI</a> in one of my Vue.js projects. I want to check if the form is valid before continuing any further action once the submit button is clicked.</p>
  
  <p>Can anybody direct me to an example how to reference the element inside a Vue component and check its validity.  </p>
  
  <p>Following is my form setup.</p>
  
  <pre><code> &lt;div id="frmEventCreate"&gt;
   &lt;el-form v-bind:model="data" v-bind:rules="rules"&gt;
      &lt;el-form-item label="Event name" prop="name" required&gt;
         &lt;el-input v-model="data.name"&gt;&lt;/el-input&gt;
      &lt;/el-form-item&gt;
  
      &lt;el-button type="success" v-on:click="next" icon="el-icon-arrow-right"&gt; Next Step &lt;/el-button&gt;
   &lt;/el-form&gt;
   &lt;/div&gt;
  
  var objEvent = {neme: "Some Name"};
  vmEventCreate = new Vue({
      el: '#frmEventCreate',
      data: {
          data: objEvent,
          rules: {
              name: [
                  {required: true, message: 'Please input event name', trigger: 'blur'},
                  {min: 10, max: 100, message: 'Length should be 10 to 100', trigger: 'blur'}
              ]
          },
      },
      methods: {
          next: function () {
              // need to check if the form is valid, here..
          }
      }
  });
  </code></pre>