title: Vuelidate: validate on click, not when field touched
body: <p>I'm kinda new to vuelidate, and everything works fine, except I have no clue how to run validation only when the button <kbd>Submit</kbd> has been clicked. Right now it marks touched field red when you start providing any input and I'd like it to wait with that, till user wants to submit filled form. </p>
  
  <p>Here's what I've got up to now:  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.use(window.vuelidate.default)
  const { required, minLength, sameAs } = window.validators
  
  new Vue({
   el: "#app",
    data: {
     user: {
       login: '',
        password: '',
        repeatedPassword: ''
      }
    },
    validations: {
     user: {
       login: {
         required,
          minLength: minLength(5)
        },
        password: {
         required,
          minLength: minLength(8)
        },
        repeatedPassword: {
         required,
          sameAs: sameAs('password')
        }
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input {
    border: 1px solid silver;
    border-radius: 4px;
    background: white;
    padding: 5px 10px;
  }
  
  .error {
    border-color: red;
    background: #FDD;
  }
  
  .error:focus {
    outline-color: #F99;
  }
  
  .valid {
    border-color: #5A5;
    background: #EFE;
  }
  
  .valid:focus {
    outline-color: #8E8;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://unpkg.com/vue"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vuelidate/dist/validators.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"&gt;&lt;/script&gt;
  `&lt;div id="app"&gt;
  
    &lt;input type="text" placeholder="login"
      v-model="user.login"
      v-on:input="$v.user.login.$touch"
      v-bind:class="{error: $v.user.login.$error, valid: $v.user.login.$dirty &amp;&amp; !$v.user.login.$invalid}"&gt;
    &lt;br/&gt;    
    &lt;input type="password" placeholder="password"
      v-model="user.password"
      v-on:input="$v.user.password.$touch"
      v-bind:class="{error: $v.user.password.$error, valid: $v.user.password.$dirty &amp;&amp; !$v.user.password.$invalid}"&gt;
    &lt;br/&gt;  
    &lt;input type="password" placeholder="repeat password"
      v-model="user.repeatedPassword"
      v-on:input="$v.user.repeatedPassword.$touch"
      v-bind:class="{error: $v.user.repeatedPassword.$error, valid: $v.user.repeatedPassword.$dirty &amp;&amp; !$v.user.repeatedPassword.$invalid}"
    &gt;
    &lt;button :disabled="$v.user.$error" @click="$v.user.$touch()"&gt;
      Submit!
    &lt;/button&gt;
  &lt;/div&gt;`</code></pre>
  </div>
  </div>
  </p>