Vue and HTML5 Form Validation

#vue #typescript

The browser form validation has gotten better over the years and I have started to find simply adding some minor customization to the HTML5 form validation effective and a huge time saver.

For the times you want a custom error message along with a regex pattern:

<template>
  <input type="tel" pattern="^[0-9]{5}?$" required name="zipCode" v-model.trim="zipCode" @keyup="customInvalid" />
</template>

<script setup lang="ts">
const zipCode = ref('');
interface InputTextKeyboardEvent extends KeyboardEvent {
  currentTarget: HTMLInputElement;
}

const customInvalid = (e: InputTextKeyboardEvent) => {
  if (e.currentTarget.validity.patternMismatch) {
    e.currentTarget.setCustomValidity('Please enter a valid 5 digit US Postal Code');
  } else {
    e.currentTarget.setCustomValidity('');
  }
};
</script>

The key to the above solution is using the @keyup. This way it re-evaluates the validity after the browser updates the validity. This is the only event I could find that allowed me to hide the error message as soon as the user enters a valid value.

ref:
https://reactgo.com/html5-custom-validation-message/