Vue, vualidate how to start validation?

Question

Vue.js

Good day! I can't figure out how to validate on vue3. In the vualidate examples, everything is on a different level, but I have a simple html page.
There is a form on it, on the form the v-on:submit event (submit is processed, there is an event), in the js vue body:

methods: {
        send: function (e) {
          alert('Go');

          return false;
        }
      },
      validations () {
        return {
          surname: { requaried },
          name: { requaried },
          phone: {
            requaried,
            minLength: minLength(11),
          }
        }
      }

I can't figure out how to check this or that field, how to get the validation status for this or that field. Tell me who worked with this library

Answer 1

vuelidate looks at your properties in data(){} and makes the properties computed, subscribing to them when you specify them in the corresponding validations object.
Example:

data() {
  return {
    name: '',
  },
},
validations() {
  return {
    name: { required },
  },
},

somewhere in the template:

<input type="text" v-model="name" @input="$v.name.$touch()"/>

Or In the second case, the $touch method is automatically called, which determines whether the user "touched" the field, and the value entered in the field is written in data.name and $v.name.$model. Whether the user touched the field displayed in the property Since we passed the required validator, it will also be possible to see the current status of this validator there: There are many other useful properties. You can rely, for example, on or on
<input type="text" v-model="$v.name.$model"/>
$v.name.required;
By "touched" it is assumed that the user did not just set the focus in the field and left it, but entered something.
You can also see the general validation status of the current component in the root $v.$invalid, etc.