How to properly validate a Vue form?

Question

Vue.js

I need to do form validation.

1. When creating a task, at least 10 characters. Red border.


2. If correct, it was green


3. And that the button would not be active until the correct value is entered.


jsfiddle code here

Answer 1

computed: {
  newTodoValid() {
    return this.newTodo.length >= 10;
  },
},

<input :class="newTodoValid ? 'valid' : 'not-valid'">
<button :disabled="!newTodoValid">

.valid {
  border: 2px solid green;
}

.not-valid {
  border: 2px solid red;
}

Answer 2

If there are a lot of forms, then I advise you to use the vee-validate
plugin Lightweight, flexible. In general, cool stuff. But this is if there are more than one form)