2

Как делать корректно валидацию полей после нажатия на кнопку submit, проверить заполнены ли поля все и их длина не больше например 30 символов. Проблема я не пойму как можно повесить полям два класса .is-invalid или .is-valid и как правильно выводить нужно ошибку под нужным полем.

new Vue({
  el: '#app',
  data() {
    return {
      article: {
        id: '',
        title: '',
        body: ''
      },
      valid: false,
      errors: {
        title: "",
        body: ""
      }
    }
  },
  methods: {
    submitHandle() {
       this.errors = [];
            if (!this.article.title) {
                this.errors.title = 'Title required';
            } else if (this.article.title.length < 5) {
                this.errors.title = 'Title must contain at least 5 characters';
            } else {
                this.errors.title = '';
            }

            if (!this.article.body) {
                this.errors.body = 'Body required'
            } else if (this.article.body.length < 5) {
                this.errors.body = 'Body must contain at least 5 characters';
            } else {
                this.errors.body = '';
            }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form @submit.prevent="submitHandle">
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Title" v-model="article.title">
      <div v-if="errors.title" class="invalid-feedback">{{errors.title}}</div>
    </div>
    <div class="form-group">
      <textarea type="text" class="form-control" placeholder="Body" v-model="article.body"></textarea>
      <div v-if="errors.body" class="invalid-feedback">{{errors.body}}</div>
    </div>
    <button class="btn btn-primary">Save</button>
  </form>
</div>

2 ответа 2

2

Для отображения пользовательских сообщений проверки формы Bootstrap вам необходимо добавить логический атрибут novalidate в тег <form>. Это отключает всплывающие подсказки браузера по умолчанию.

1 При попытке отправки вы увидите стили :invalid и :valid, примененные к элементам формы. Такая валидация основывается на API. Это отработка атрибутов таких как required. Список доступных атрибутов. Помимо этого для данного способа необходимо менять класс у тега form. Подробнее рассмотрено на оф. сайте. Поддерживается всеми современными браузерами.

// vuejs component

<form :class="{'was-validated': wasValidated}" @submit="checkForm" novalidate>
 ...
</form>

<script type="text/javascript">
export default {
  data() {
    return {
      wasValidated: false,
    }
  },
  methods: {
    checkForm(event) {
      this.wasValidated = true

      let form = event.target
      if (form.checkValidity() === false) {
        event.preventDefault()
        event.stopPropagation()
      }
      ...
    }
  }
</script>

2 В качестве запасного варианта вместо псевдоклассов для проверки могут использоваться классы .is-invalid и .is-valid. Им не требуется родительский класс .was-validated. Именно этот вариант и рассмотрен в примере ниже.

new Vue({
  el: '#app',
  data: {
    // Модель ошибок валидации.
    errors: {},
    // Модель того, что была выполнена валидация.
    wasValidated: false,
    // Модель записи.
    article: {
      title: '',
      body: ''
    }
  },
  computed: {
    // Вычисляемое свойство будет применено к элементам формы
    // только после выполнения валидации `wasValidated`.
    // Иначе при первичной отрисовки классы будут подсвечены.
    validatedClass() {
      return (input) => {
        return {
          'is-valid': this.wasValidated && !this.errors[input],
          'is-invalid': this.wasValidated && this.errors[input],
        }
      }
    },
  },
  methods: {
    checkForm(event) {
      // Оборачиваем в try...catch обязательно.
      // При  ошибках в `javascript` Форма
      // НЕ отправится, ошибки выведутся в консоли.
      try {
        // Сбросим все ошибки.
        this.errors = {}

        this.checkTitle()

        // Если есть ошибки,
        // то отменяем отправку формы.
        if (Object.keys(this.errors).length) {
          throw new Error(JSON.stringify(this.errors))
        }
      } catch (error) {
        event.preventDefault()
        console.error(error)
      } finally {
        // Отмечаем, что поля формы были проверены
        // для корректной подсветки классов bootstrap.
        // См. `computed` поле.
        this.wasValidated = true
      }
    },

    /**
     * Проверка заголовка записи.
     */
    checkTitle() {
      // Сбросим ошибки о содержимом записи.
      this.errors.title = []

      if (!this.article.title.length) {
        this.errors.title.push(`Поле title обязательно для заполнения.`)
      }

      if (this.article.title.length < 5) {
        this.errors.title.push(`Поле title должно быть не менее 5 символов.`)
      } else if (this.article.title.length > 10) {
        this.errors.title.push(`Поле title не может быть более 10 символов.`)
      }

      if (!this.errors.title.length) {
        // Если нет ошибок в поле `title`,
        // принудительно удаляем информацию.
        delete this.errors.title
      }
    },
  }
})
<div id="app">
  {{ errors }}
  <div class="container mt-5">
    <form @submit="checkForm" novalidate>
      <div class="form-group">
        <label>Title</label>
        <input type="text" class="form-control" :class="validatedClass('title')" v-model="article.title" required/>
        <div v-for="error in errors.title" class="invalid-feedback">{{ error }}</div>
      </div>

      <button class="btn btn-primary" type="submit">Submit form</button>
    </form>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

Итог:

  1. Пример того как "вешать" разные классы указан в коде в поле computed.
  2. Ошибки выводим с использованием директивы v-for.
0
1

Проверить пустой ли инпут можно, связав с помощью v-model сам инпут с какой-нибудь переменной в data(). И проверять её длину. Например

<input v-model="loginInput">

data() {
  return {
    loginInput: ''
  }
}

Повесить два класса надо, я так понимаю, в зависимости от состояния. Делается тоже просто.

<div :class="{'is-valid': loginInput.length > 0, 'is-invalid': loginInput.length === 0}"></div>

Подробнее тут. Подробнее про связывание инпута с переменной тут.

Либо все проверки в computed() затолкать. Типа такого

computed() {
  validate() {
    if(this.loginInput.length > 0 && this.someRegExp.test(loginInput) && this.loginInput.length < 20 && ...) {
      return true;
    } else {
      return false;
    }
  }
}

тогда в темплейте получится чуть проще

<div :class="{'is-valid': validate, 'is-invalid': !validate}"></div>
5
  • Ответ конечно рабочий, однако очень сильно смешивает валидацию с вёрсткой. Нет ли более изящного способа? Я просто представляю себе какая каша будет в template если туда ещё и maxLength для строк прописать. Можно ли как-то отделить одно от другого? Т.е. описать правила в коде (не пустая строка, проверка на maxLength и т.п.). И я не знаю, как в таком подходе сделать проверку на уникальность емейла в базе - никак, только опрашивать бекенд.
    – A K
    7 мая 2019 в 6:53
  • @AK не совсем понимаю. Классы меняются в зависимости от состояния переменной. Это касательно вопроса о классах. А валидация выполняется либо вот так вручную, задавая все условия для её прохождения, либо каким-нибудь vuelidate воспользоваться. Больше не знаю что подсказать, сори. 7 мая 2019 в 6:56
  • @AK можно отделить. В computed описываешь все условия, и используешь только одно лишь компьютед свойство. То есть туда и длину, и символы, и прочие условия кидай. 7 мая 2019 в 6:58
  • @AK чуть подправил 7 мая 2019 в 7:02
  • Очень хорошие дополнения: и насчёт computed и насчёт vuelidate. Теперь однозначно плюс.
    – A K
    7 мая 2019 в 7:07

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.