CODEWITHSUNDEEP
htmlvue.jsvuetify.js
Half_Duplex
Half_Duplex

Reputation: 5234

Default browser form validation not working in Vuetify v-form

I would like to take advantage of the browsers default form validation as I'll handle deeper validation in my service layer. The only validations I will need are required and email for this example.

I am using the examples described here without success. The required and email properties are ignored. 

<template>
  <v-row justify="center">
    <v-dialog v-model="visible" persistent max-width="600px">
      <v-form ref="userForm" @submit.prevent="handleSubmit">
      <v-card>
        <v-card-title>
          <span class="headline">Adding User</span>
        </v-card-title>
        <v-card-text>
          <v-container>
            <v-row>
              <v-col cols="12">
                <v-alert
                  v-if="error"
                  border="left"
                  colored-border
                  type="error"
                  elevation="2"
                >{{error}}</v-alert>
              </v-col>
              <v-col cols="12">
                <v-text-field label="Name" required v-model="user.name" />
              </v-col>

              <v-col cols="12">
                <v-text-field label="Email" required type="email" v-model="user.email" />
              </v-col>

              <v-col cols="12">
                <v-text-field required label="Password" type="password" v-model="user.password" />
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" text @click="onCancel">Close</v-btn>
          <v-btn color="blue darken-1" type="submit">Save</v-btn>
        </v-card-actions>
      </v-card>
      </v-form>
    </v-dialog>
  </v-row>
</template>

<script>

export default {
  name: "AddUser",
  data() {
    return {
      user: {}
    };
  },
  props: {
    error: {},
    permissions: {},
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleSubmit() {
      // This is executed on submit but no validation errors are shown

      // this.$refs.form.checkValidity() // throws an error on checkValidity not being a function
      this.$emit("onConfirmed", this.user);
    },
    onCancel() {
      this.$emit("onCancelled");
    }
  },
  created: function() {}
};
</script>

Upvotes: 3

Views: 1863

Answers (1)

Rikkas
Rikkas

Reputation: 582

You have to use rules for validation in vuetify as stated in documentation

<v-text-field
   v-model="email"
   :rules="[rules.required, rules.email]"
   label="E-mail"
></v-text-field>

<script>
export default {
data () {
  return {
    email: '',
    rules: {
      required: value => !!value || 'Required.',
      email: value => {
        const pattern = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
        return pattern.test(value) || 'Invalid e-mail.'
      },
    },
  }
},
</script>

Upvotes: 3

Related Questions