Проверка формы не отображает ошибку на экране с Vuelidate

Я пытаюсь добавить несколько проверок с помощью Vuelidate в форму входа. Когда я оставляю поле имени пользователя пустым, я ожидаю увидеть предупреждение о том, что имя требуется, но ничего не отображается.

Он не переходит к следующему шагу (чего я хочу), поэтому я предполагаю, что проверка работает, я просто не получаю сообщение, отображаемое на экране. Я запустил его в режиме отладки и не получаю никаких ошибок. Что-то я сделал не так?

<template>
    <div>
        <h3>Sign in</h3>
        <div class="row" v-if="errorMessage">
            <div class="alert alert-danger"><p>{{ errorMessage }}</p></div>
        </div>
        <div class="row" v-if="successMessage">
            <div class="alert alert-success"><p>{{ successMessage }}</p></div>
        </div>
        <form @submit.prevent="OnLogin">
            <div class="form-group">
                <label for="userSigninLogin">Email</label>
                <input name="username" type="text"
                class="form-control"
                :class="{ 'is-invalid': submitted && $v.apiRequest.username.$error }"
                placeholder="Enter your email" v-model="apiRequest.username">
            </div>
            <div class="form-group">
                <label for="userSigninPassword">Password</label>
                <input name="password" type="password"
                class="form-control" id="userSigninPassword"
                placeholder="Enter your password" v-model="apiRequest.password">
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
            <div v-if="submitted" && !$v.apiRequest.username.required
                class="alert alert-danger"><p>Name is required</p></div>
            <div class="row" v-if="submitted" && !$v.apiRequest.username.required>
              <div class="alert alert-danger"><p>Name is required</p></div>
            </div>
        </form>
    </div>
</template>

<script>
import { required, minLength } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      apiRequest: new this.$request({
        username: '',
        password: '',
      }),
      errorMessage: '',
      successMessage: '',
      submitted: false,
    };
  },
  validations: {
    apiRequest: {
      username: {
        required,
        minLength: minLength(2),
      },
    },
  },
  methods: {
    OnLogin() {
      this.submitted = true;
      this.apiRequest.addStore(this.$store);
      this.apiRequest.post('login')
        .then((response) => {
          this.successMessage = response;
          this.errorMessage = '';
        })
        .catch((errors) => {
          this.errorMessage = errors;
          this.successMessage = '';
        });
    },
  },
};
</script>

vue.js vuelidate
person ChrisG29    schedule 29.05.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Следуйте инструкциям, которые помогут вам решить вашу проблему. Вы забыли добавить проверку при нажатии кнопки, а также ошибка шаблона при отображении сообщения об ошибке.

Шаг 1. HTML template

<div id="app">
  <h3>Sign in</h3>
  <div class="row" v-if="errorMessage">
    <div class="alert alert-danger">
      <p>{{ errorMessage }}</p>
    </div>
  </div>
  <div class="row" v-if="successMessage">
    <div class="alert alert-success">
      <p>{{ successMessage }}</p>
    </div>
  </div>
  <form @submit.prevent="OnLogin">
    <div class="form-group">
      <label for="userSigninLogin">Email</label>
      <input name="username"
        type="text" class="form-control" :class="{ 'is-invalid': submitted && $v.apiRequest.username.$error }"
        placeholder="Enter your email" v-model="apiRequest.username" />
      <div v-if="submitted && $v.apiRequest.username.$error" class="alert alert-danger">
        <span v-if="!$v.apiRequest.username.required">Username is Required</span>
        <span v-if="!$v.apiRequest.username.minLength">Enter Minimum 6 character</span>
        <span v-if="$v.apiRequest.username.minLength && !$v.apiRequest.username.email">Enter Valid Email address</span>
      </div>
    </div>
    <div class="form-group">
      <label for="userSigninPassword">Password</label>
      <input name="password" type="password" class="form-control"
        id="userSigninPassword" placeholder="Enter your password" v-model="apiRequest.password" />
      <div class="row" v-if="submitted && !$v.apiRequest.password.required">
        <span class="alert alert-danger">Password is required</span>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
  </form>
</div>

Шаг 2. Инициализируйте свои modal данные

data() {
    return {
      apiRequest: {
        username: "",
        password: "",
      },
      errorMessage: "",
      successMessage: "",
      submitted: false,
    };
  },

Шаг 3. Добавьте validations правило

validations: {
    apiRequest: {
      username: {
        required,
        minLength: minLength(6),
        email,
      },
      password: { required },
    },
 },

Шаг 4. Добавьте форму submit метод

methods: {
    OnLogin() {
      this.submitted = true;
      this.$v.$touch();
      if (this.$v.$invalid) {
        return; // stop here if form is invalid
      }
      this.apiRequest
        .post("login")
        .then((response) => {
          this.successMessage = response;
          this.errorMessage = "";
        })
        .catch((errors) => {
          this.errorMessage = errors;
          this.successMessage = "";
        });
    },
  },

ДЕМО

person Jebasuthan    schedule 30.05.2021
comment
Большое спасибо за помощь! Это сработало отлично - person ChrisG29; 30.05.2021