Vue.js VeeValidate, как предотвратить передачу данных, пока все данные не будут действительными - PullRequest
0 голосов
/ 02 мая 2018

Мои требования примерно такие.

  1. Я должен ввести поля для проверки ввода пользователя.
  2. Когда пользователь заполняет поля и нажимает кнопку отправки, перед переходом к отправке я хочу отобразить все сообщения об ошибках.
  3. Отправка должна происходить, если в данных пользователя нет ошибок

Это мой код.

<template>
  <div>
      <h1>Add Items</h1>
      Product Name : 
      <input
      type="text"
      name="product"
      v-model="product"
      v-validate="'required|alpha_dash'"
      >
      <span style="color:red;">{{errors.first('product')}}</span>
      <br>
      Product Price : 
      <input 
      type="number" 
      name="price" 
      v-model="price"
      v-validate="'required|min_value:100|max_value:500'"
      >
    <span style="color:red;">{{errors.first('product')}}</span>
      <br>
      <button @click="submit">Save</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: "",
      product: ""
    };
  },
  methods: {
    submit() {
      alert("On submit");
    }
  }
};
</script>

Теперь отображается только первая ошибка {{errors.first('product')}}. Вместо этого я хочу отобразить все ошибки одновременно

и

отображает ошибки только при касании поля ввода. Я хочу отобразить все ошибки проверки независимо от того, касаетесь ли вы полей, я хочу отображать все ошибки, когда вы нажимаете кнопку отправки.

Ответы [ 2 ]

0 голосов
/ 15 марта 2019

Совалина сработала, но $ validator.validateAll () выполнял ПОСЛЕ предупреждения, то есть оно не будет проверено первым. Я нашел этот код, и он работал хорошо для меня:

submit() {
      this.$validator.validateAll().then((result) => {
        if (result) {
          alert('Form Submitted!');
          return;
        }

        alert('Correct them errors!');
      });
    }

отсюда: https://baianat.github.io/vee-validate/examples/

0 голосов
/ 02 мая 2018

Вы можете использовать validateAll метод:

   submit() {
      this.$validator.validateAll()
      if (!this.errors.any()) {
        alert('submit')
      }
    }

скрипка здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...