How do I work with form rules to not allow blankspaces in Vuetify?

1
votes

I have started to work on some validation for my code, and used the docuentation examples as the foundation of my work.

I'd like to add some validation for the user not to just type blankspaces when filling out the form. The documentation handles the "no blanks" but, then you can't type any blanks at all... I'd like to tweek it, so that the validation allows one blank space, so that a proper name can be typed.

Here is the codepen from the docs: https://codepen.io/pen/?&editable=true&editors=101

My template:

<div id="app">
  <v-app id="inspire">
    <v-form
      ref="form"
      v-model="valid"
      lazy-validation
    >
      <v-text-field
        v-model="name"
        :counter="10"
        :rules="nameRules"
        label="Name"
        required
      ></v-text-field>
  
      <v-text-field
        v-model="email"
        :rules="emailRules"
        label="E-mail"
        required
      ></v-text-field>
  
      <v-select
        v-model="select"
        :items="items"
        :rules="[v => !!v || 'Item is required']"
        label="Item"
        required
      ></v-select>
  
      <v-checkbox
        v-model="checkbox"
        :rules="[v => !!v || 'You must agree to continue!']"
        label="Do you agree?"
        required
      ></v-checkbox>
  
      <v-btn
        :disabled="!valid"
        color="success"
        class="mr-4"
        @click="validate"
      >
        Validate
      </v-btn>
  
      <v-btn
        color="error"
        class="mr-4"
        @click="reset"
      >
        Reset Form
      </v-btn>
  
      <v-btn
        color="warning"
        @click="resetValidation"
      >
        Reset Validation
      </v-btn>
    </v-form>
  </v-app>
</div>

my script:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    allowSpaces: false,
    match: 'Foobar',
    max: 0,
    model: 'Foobar',
  }),

  computed: {
    rules () {
      const rules = []

      if (this.max) {
        const rule =
          v => (v || '').length <= this.max ||
            `A maximum of ${this.max} characters is allowed`

        rules.push(rule)
      }

      if (!this.allowSpaces) {
        const rule =
          v => (v || '').indexOf(' ') < 0 ||
            'No spaces are allowed'

        rules.push(rule)
      }

      if (this.match) {
        const rule =
          v => (!!v && v) === this.match ||
            'Values do not match'

        rules.push(rule)
      }

      return rules
    },
  },

  watch: {
    match: 'validateField',
    max: 'validateField',
    model: 'validateField',
  },

  methods: {
    validateField () {
      this.$refs.form.validate()
    },
  },
})

Any ideas?

4
vue.jsvuetify.js

4 Answers

1
votes

How about a rule that's along the lines of this?

const rule = 
  v => (v.split(' ').length <= 2) 
    || 'Only one space allowed'
2
votes

You can use this:

rules: {
  blank: v => v && !!v.trim() || 'Value cannot be blank',
}

You must check if there's a value first, because you can't use trim() method on undefined.

0
votes

If you want to allow spaces in your string, but not allow ONLY spaces then you should use .trim() on the value. .trim() will strip away any beginning and ending spaces and return what is left. Then, a simple presence validation will work:

const nameRule = v => v.trim() || 'Name cannot be blank';

// " " => fails
// "Test User" => passes
0
votes

You can use this:

v => !(/[ ]/.test(v)) || 'no spaces allowed',