As I navigate my way through learning vuelidate, everything seems to be going smoothly, except for one thing. I can't figure out how to trigger validation only when the "Submit" button is clicked. Currently, the fields turn red as soon as I start typing, but I want them to wait until the user is ready to submit the form.
This is my progress so far:
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')
}
}
}
})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;
}<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script>
<script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script>
`<div id="app">
<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 && !$v.user.login.$invalid}">
<br/>
<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 && !$v.user.password.$invalid}">
<br/>
<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 && !$v.user.repeatedPassword.$invalid}"
>
<button :disabled="$v.user.$error" @click="$v.user.$touch()">
Submit!
</button>
</div>`