Vue remove invalid input message

Question

When an input field requires more info, the browser shows a message in a bubble about why the input is invalid. I would like to prevent the default for this in vue but I'm not sure how. Below is how I would do it in JavaScript but in Vue, there may be a way to do @invalid like how I know you can do @submit on a form as an eventListener. I'm also wondering if extra prevention is needed to prevent this in ios or 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

A pattern I have (idea from Vuetify) is pretty easy:

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>

This way you don't have to put up with the HTML5 "bubbles", but can still validate your form - in any way you need. You can compose any validation scheme you want by using functions that go over your input text. You could even come up with regexp validation, pattern validation (like phone numbers), etc. It's not the greatest solution, but quite "pluggable".

This is also supposed to be cross-platform (if you use Vue).

Answer 2

If you want to completely disable validation, you can add novalidate="true" to your form element.

I suspect that you might only want to do that on the initial page load. If so, could you update your section and hopefully and add an example? I can update my answer after that 😀