Vue: как привлечь внимание пользователя к пустым полям при отправке формы: требуется ли if-else?


Vue: как привлечь внимание пользователя к пустым полям при отправке формы: требуется ли if-else?

07.07.2020 09:42:00 Просмотров 34 Источник

Я пытаюсь выполнить функцию if-else. Я вижу, что он работает, когда есть пустое поле, оно сначала фокусируется на вводе или если есть значение во вводе, то может отправить. Но я попытался написать какой-то текст на вход, а затем вычесть его, и функция If-else не работает, как раньше, так как же делать дальше?

<!doctype html>
<html>

<head>


    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" />
    <link href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css" rel="stylesheet" />
    <link href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
    <div id="app">
        <v-app>
            <v-content>
                <v-container>
                    <b-form @submit="onSubmit">
                        <b-row>
                            <b-col>
                                <v-combobox v-model="answer.type_a" :items="type_a" label="a" multiple ref="type_a">
                                </v-combobox>
                            </b-col>
                            <b-col>
                                <v-combobox v-model="answer.type_b" :items="type_b" label="b" multiple ref="type_b">
                                </v-combobox>
                            </b-col>
                        </b-row>

                        <v-btn type="submit" color="primary">Submit</v-btn>

                    </b-form>

                </v-container>
            </v-content>
        </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
</body>
<script>
    new Vue({
      el: '#app',
      vuetify: new Vuetify(),
      data: () => ({
        type_a: ["a", "b"],
        type_b: ["c","d"],
      
        
        answer: {
          type_a: "",
          type_b: "",
        },

      }),
       methods: {
        focusInput: function(inputRef) {
          this.$refs[inputRef].focus();
        },
         
       onSubmit(evt) {
      evt.preventDefault();

      if (this.answer.type_a !== "" && this.answer.type_b !== "") {
        axios.post("/", this.answer)
          .then(() => {
            console.log("SUCCESS!!");
          })
          .catch(() => {
            alert("FAILURE!!");
          })
      } else {
        if (!this.answer.type_a) {
          this.focusInput("type_a");
          return ;
        }
        if (!this.answer.type_b) {
          this.focusInput("type_b");
          return ;
        }
        // return true;
      }
    },

         
         

      }

    })

</script>

</html>

В этом простом HTML-коде я вижу функцию required, которую я хочу, когда нажимаю submit if empty field do focus и если есть значение во входных данных, могу передать

<form>
    <input type="text" name="usrname" required>
    <input type="text" name="usrname" required>
    <input type="submit">
</form>

У вопроса есть решение - Посмотреть?

Ответы - Vue: как привлечь внимание пользователя к пустым полям при отправке формы: требуется ли if-else? / Vue: how to draw user's attention to empty fields on form submission: is an if-else required?

Eureka

07.07.2020 10:20:34

Вы правы, Vue и его реактивность позволяют гораздо лучше это сделать

Вот простой подход, который вы можете попробовать: показать кнопку "Отправить" только после того, как они ввели все данные.

<v-combobox v-model="answer.type_a" :items="type_a" label="a" multiple ref="type_a">
</v-combobox>

<v-combobox v-model="answer.type_b" :items="type_b" label="b" multiple ref="type_b">
</v-combobox>

<div v-if="answer.type_a && answer.type_b">
    <v-btn type="submit" color="primary">Submit</v-btn>
</div>
<div v-else>
    Both entries are required
</div>

Сам HTML содержит логику" если-то", которую легче увидеть при программировании. Только когда будут даны ответы (для простоты я предполагаю, что действительные ответы являются "правдивыми" в Javascript), кнопка будет видна. Пока этого не произойдет, они получат сообщение о том, что "требуются обе записи".

Достаточно ли этого, чтобы вы начали?

Является ответом!
Eureka

07.07.2020 05:13:09

Пример использования v-if в шаблоне

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

Когда вы пишете v-if внутри < > div, то этот div отображается только в том случае, если условие v-if истинно. Используя этот подход, вы можете сделать так, чтобы каждый вопрос появлялся (и автоматически фокусировался, используя атрибут autofocus) только тогда, когда на все предыдущие вопросы были даны ответы.

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

<!DOCTYPE html>
<html>
  <head>
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css"
    />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css"
    />
    <link
      href="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.css"
      rel="stylesheet"
    />
    <link
      href="https://unpkg.com/bootstrap@4.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div id="app">
      <v-app>
        <v-main>
          <v-container>
            <b-form @submit="onSubmit">
              <b-row>
                <b-col>
                  <v-combobox
                    v-model="answer.type_a"
                    :items="type_a"
                    label="a"
                    multiple
                    autofocus
                    ref="type_a"
                  >
                  </v-combobox>
                </b-col>
                <b-col v-if="answer.type_a !==''">
                  <v-combobox
                    v-model="answer.type_b"
                    :items="type_b"
                    label="b"
                    multiple
                    autofocus
                    ref="type_b"
                  >
                  </v-combobox>
                </b-col>
                <b-col> 
                  <div v-if="answer.type_b!==''">
                    <v-btn type="submit" color="primary">Submit</v-btn>
                  </div>
                </b-col>
              </b-row>
            </b-form>
          </v-container>
        </v-main>
      </v-app>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script src="https://unpkg.com/bootstrap-vue@2.0.0-rc.11/dist/bootstrap-vue.min.js"></script>
  </body>
  <script>
    new Vue({
      el: "#app",
      vuetify: new Vuetify(),
      data: () => ({
        type_a: ["a", "b"],
        type_b: ["c", "d"],

        answer: {
          type_a: "",
          type_b: "",
        },
      }),
      methods: {
        focusInput: function(inputRef) {
          this.$refs[inputRef].focus();
        },

        onSubmit(evt) {
          evt.preventDefault();
          if ((!this.answer.type_a, !this.answer.type_b)) {
            if (!this.answer.type_a) {
              this.focusInput("type_a");
              return true;
            }
            if (!this.answer.type_b) {
              this.focusInput("type_b");
              return true;
            }
          } else {
            axios
              .post("", this.answer)
              .then(() => {
                alert("SUCCESS!!");
              })
              .catch(() => {
                alert("FAILURE!!");
              });
          }
        },
      },
    });
  </script>
</html>

Помочь в развитии проекта:
Закрыть X