title: How to implement a simple form with validation in a Vue app (with Vuetify.js)?
body: <p>I'm trying to add a contact form with simple validation on a website built with Vue.js using a Vuetify.js example. I'm a newbie, so I'm not sure how it should be implemented in a Vue component.</p>
  
  <hr>
  
  <p>I want to achieve a simple client side form validation and make it work with a <a href="https://getform.org/" rel="noreferrer">https://getform.org/</a> form.</p>
  
  <hr>
  
  <p>UPDATED:</p>
  
  <h3>Code | Contact.vue</h3>
  
  <p>(taken from Vuetify.js form <a href="https://github.com/vuetifyjs/docs/blob/master/examples/forms/basic-validation.vue" rel="noreferrer">example</a>)</p>
  
    
  
  <pre class="lang-html prettyprint-override"><code>&lt;v-form v-model="valid"&gt;
        &lt;v-text-field
          label="Name"
          v-model="name"
          :rules="nameRules"
          :counter="10"
          required
          name="Name"
        &gt;&lt;/v-text-field&gt;
  
        &lt;v-text-field
          label="E-mail"
          v-model="email"
          :rules="emailRules"
          required
          name="Email"
        &gt;&lt;/v-text-field&gt;
  
        &lt;v-btn
            @click="submit"
            :disabled="!valid"
        &gt;submit&lt;/v-btn&gt;
    &lt;/v-form&gt;
  
    &lt;form method="post" action="https://www.getform.org/f/[MY_ID_HERE]" id="nativeForm"&gt;&lt;/form&gt;
  </code></pre>
  
  <h3>Script</h3>
  
  <pre class="lang-html prettyprint-override"><code>&lt;script&gt;
  export default {
    name: 'contact',
  
    data () {
      return {
        snackbar: true, 
        valid: false,
          name: '',
          nameRules: [
            (v) =&gt; !!v || 'Name is required',
            (v) =&gt; v.length &lt;= 10 || 'Name must be less than 10 characters'
          ],
          email: '',
          emailRules: [
            (v) =&gt; !!v || 'E-mail is required',
            (v) =&gt; /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
          ]
        }
      },
      methods: {
        submit() {
          nativeForm.submit()
        }
      }
    }
  &lt;/script&gt;
  </code></pre>