Vue удалить неверное сообщение ввода

Question

Когда в поле ввода требуется дополнительная информация, браузер показывает сообщение в пузыре о том, почему ввод недопустим. Я хотел бы предотвратить использование этого параметра по умолчанию в vue, но я не уверен, как это сделать. Ниже показано, как я бы сделал это в JavaScript, но в Vue может быть способ сделать @invalid, как я знаю, что вы можете сделать @submit в форме в качестве eventListener. Мне также интересно, нужна ли дополнительная профилактика для предотвращения этого в ios или android.

HTML

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

JS

document.querySelector( "input" ).addEventListener( "invalid",
 function( event ) {
        event.preventDefault();
  });

https://codepen.io/albert-anthony4962/pen/BajORVZ

Answer 1

Если вы хотите полностью отключить проверку, вы можете добавить novalidate="true" в свой form элемент.

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

Answer 2

Шаблон, который у меня есть (идея из Vuetify), довольно прост:

new Vue({
  el: "#app",
  data: {
    isFormValid: null,
    form: {
      input_1: {
        text: null,
        rules: ['required', 'min3'],
        validateText: null
      },
      input_2: {
        text: null,
        rules: ['required'],
        validateText: null
      }
    },
    rules: {
      required: v => !!v && !![...v].length || 'This field is required.',
      min3: v => !!v && !!([...v].length > 2) || 'This field must be at least 3 characters long.'
    }
  },
  methods: {
    validateForm() {
      const validated = []
      for (let key in this.form) {
        const v = this.form[key].rules.map(e => {
          return this.rules[e](this.form[key].text)
        })
        if (v.some(e => e !== true)) {
          this.form[key].validateText = v.filter(e => e !== true)[0]
          validated.push(false)
        } else {
          this.form[key].validateText = "This field is valid."
          validated.push(true)
        }
      }
      return validated.every(e => e === true)
    },
    submitForm() {
      if (this.validateForm()) {
        // submit logic
        this.isFormValid = "Yes, it's valid."
      } else {
        // not valid logic:
        this.isFormValid = "No, it's not valid."
      }
    },
    resetValidation() {
      const form = JSON.parse(JSON.stringify(this.form))
      for (let key in form) {
        form[key].validateText = null
      }
      this.isFormValid = null
      this.form = form
    },
    resetForm() {
      const form = JSON.parse(JSON.stringify(this.form))
      for (let key in form) {
        form[key].validateText = null
        form[key].text = null
      }
      this.isFormValid = null
      this.form = form
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <form ref="formRef">
    <label for="input_1">
      Input 1: 
      <input
        id="input_1"
        type="text"
        v-model="form.input_1.text"
      />
    </label>
    <div>This field will validate if NOT EMPTY AND HAS AT LEAST 3 CHARS</div>
    <div>{{ form.input_1.validateText || '&nbsp;' }}</div>
    <br />
    <label for="input_2">
      Input 2: 
      <input
        id="input_2"
        type="text"
        v-model="form.input_2.text"
      />
    </label>
    <div>This field will validate if NOT EMPTY</div>
    <div>{{ form.input_2.validateText || '&nbsp;' }}</div>
    <br />
    <button type="submit" @click.prevent="submitForm">
      SUBMIT
    </button>
    <div>Is the form valid? {{ isFormValid }}</div>
  </form>
  <button @click="resetValidation">RESET VALIDATION</button><br />
  <button @click="resetForm">RESET FORM</button>
</div>

Таким образом, вам не придется мириться с HTML5 «пузырями», но вы все равно сможете проверить свою форму любым удобным для вас способом. Вы можете составить любую схему проверки, которую хотите, используя функции, которые go поверх вводимого текста. Вы даже можете придумать проверку regexp, проверку шаблона (например, номера телефонов) и т. Д. c. Это не лучшее решение, но вполне «подключаемое».

Предполагается, что оно также будет кроссплатформенным (если вы используете Vue).