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

Hi albert_anthony6! Could you put up a sandbox showing the behavior you're seeing? — JuanCaicedo
– JuanCaicedo, Commented Jul 14, 2020 at 19:00
Yes. The first input is what I seek. To disable the message. The second input shows the default message. codepen.io/albert-anthony4962/pen/BajORVZ — albert_anthony6
– albert_anthony6, Commented Jul 14, 2020 at 19:22
Thanks for adding that codepen! Unfortunately, I don't think it really shows the problem 😅 It doesn't seem like Vue is being included on the page, and I don't see any validation messages being displayed — JuanCaicedo
– JuanCaicedo, Commented Jul 15, 2020 at 4:25

JuanCaicedo · Accepted Answer · 2020-07-14 19:02:08Z

1

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 😀

answered Jul 14, 2020 at 19:02

JuanCaicedo

3,4963 gold badges21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

albert_anthony6 Over a year ago

I only want to disable the message, novalidate will overwrite the required attribute which i don't want. Only the message should be disabled please

muka.gergely · Accepted Answer · 2020-07-14 20:03:50Z

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).

Collectives™ on Stack Overflow

Vue remove invalid input message

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related