create a group of vuejs formkit fields to handle date of birth inputs in three separate inputs, one for dd, one for mm and one for yyyy, with only one validation message for all three fields in typescript

Here's an example of how you can achieve this using Vue.js with TypeScript and Vuetify:

<template>
  <v-form @submit.prevent>
    <v-container>
      <v-row>
        <v-col cols="4">
          <v-text-field
            v-model.number="day"
            :rules="[isDateValid]"
            label="Day"
            type="number"
            :error-messages="validationMsg"
          />
        </v-col>
        <v-col cols="4">
          <v-text-field
            v-model.number="month"
            :rules="[isDateValid]"
            label="Month"
            type="number"
          />
        </v-col>
        <v-col cols="4">
          <v-text-field
            v-model.number="year"
            :rules="[isDateValid]"
            label="Year"
            type="number"
          />
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-alert
            v-if="!isDateValid(day, month, year)"
            type="error"
            dismissible
            border="left"
            elevation="2"
            colored-border
          >
            {{ validationMsg }}
          </v-alert>
        </v-col>
      </v-row>
      <v-row>
        <v-col>
          <v-btn color="primary" @click="submit" :disabled="!isDateValid(day, month, year)">Submit</v-btn>
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { VuetifyValidations } from 'vuetify/types/services/validation';

@Component({
  name: 'DateOfBirthFields',
  validations: {
    isDateValid(value: string, vm: VuetifyValidations) {
      const { day, month, year } = vm.$data;
      if (!day || !month || !year) {
        return true;
      }
      const dateObj = new Date(year, month - 1, day);
      if (
        dateObj.getFullYear() !== year ||
        dateObj.getMonth() + 1 !== month ||
        dateObj.getDate() !== day
      ) {
        vm.$data.validationMsg = 'Invalid date of birth';
        return false;
      }
      return true;
    },
  },
})
export default class DateOfBirthFields extends Vue {
  day: number | null = null;
  month: number | null = null;
  year: number | null = null;
  validationMsg = '';

  submit() {
    if (this.isDateValid(this.day, this.month, this.year)) {
      // Handle form submission
    }
  }
}
</script>

2250 chars
92 lines

In this example, we're using the Vuetify library to implement the form fields. The v-model.number directive is used to bind the input values to the component's data properties as numbers.

We've defined a isDateValid validation rule that validates the date of birth fields. The validation function uses the Date object to create a new date from the three input fields' values. If the date is a valid date of birth, the validation function returns true. Otherwise, it returns false and sets the validation message in the component's data.

We also have a validationMsg data property that is used to hold the validation message. If a date of birth is invalid, the validation message is displayed in an error alert below the form inputs.

Finally, the submit method is called when the form is submitted, and it checks if the date of birth is valid before handling the form submission.

similar typescript code snippets

emit a function call to the parent element in a vuejs formkit custom input using composition plus typescript api in typescript
emit a function call to the parent element in a vuejs formkit custom input in typescript
detect browser or current tab closed in vuejs using composition api from vue 3 in typescript
create a generic interface in typescript
check if enum is valid in typescript
create a function that calculates volume of a cube in typescript
store generic into localstorage in typescript
split a provided array into chunks of a provided size in javascript in typescript
a generic function for storing cache into localstorage in typescript
how to define an interface in typescript

related categories

vuejs
form-validation
typescript

gistlibby LogSnag