Name Alpha Validations Not Allowing Spaces

Question

I am writing new form as below in vue js. In name field i want to enter like "John Doe". Basicly its a combination of first name and last name.

I tried some regex expressions instead of alpha validation for name. but its also not allowing me to type space bar. When i hit space bar it is not showing space between the words.


validations: {
      name: {
        required,
        isNameValid:helpers.regex('isNameValid',^[a-zA-Z0-9_ ]*$),
        minLength: minLength(4)
      },

<input
          v-model.trim="$v.name.$model"
          name="name"
          label="Name"
          :error="$v.name.$error"
          @input="delayTouch($v.name)"
        />

<script>

  import {
    validationMixin
  } from "vuelidate";
  import {
    required,
    alpha,
    minLength,
    email,
    helpers
  } from "vuelidate/lib/validators";

  import { createNamespacedHelpers } from "vuex";

  const {
    mapGetters: mapQuoteGetters,
    mapState: mapQuoteState
  } = createNamespacedHelpers("mydata");

  // For delayed validation
  const touchMap = new WeakMap();
export default {
name: "MoveInfo",
mixins: [validationMixin],
    data() {
      return {
        name: ""

      };
    },
    computed: {
      ...mapQuoteState({
        mydata: "mydata"
      })
    },
  methods: {
      delayTouch($v) {
        $v.$reset()
        if (touchMap.has($v)) {
          clearTimeout(touchMap.get($v))
        }
        touchMap.set($v, setTimeout($v.$touch, 1000))
      }
    },
    validations: {
      name: {
        required,
        alpha,
        minLength: minLength(4)
      },

Can anybody tell me how to resolve this and what wrong with my regular expression?

score 0 · Answer 1 · answered Sep 12 '19 at 07:25

0

It's because you have v-model.trim in your input

<input
   v-model.trim="$v.name.$model"
   name="name"
   label="Name"
   :error="$v.name.$error"
   @input="delayTouch($v.name)"
/>

.trim trims the white space, it's not because of the regex.

answered Sep 12 '19 at 07:25

Jay Li

737
1
7
17

can i remove the complete line? "alpha" allows spaces as well?? – Sravanthi Sep 12 '19 at 08:14
1

what 'complete line' do you mean? and have you tried remove `.trim` yet? – Jay Li Sep 12 '19 at 08:55
@JayLi I'm having the same issue. I removed the `.trim` modifier, but I still get an error when adding space. Can you help me? – Manuel Abascal Sep 23 '19 at 23:45
try also remove 'alpha'? – Jay Li Sep 24 '19 at 01:21
1

This answer is incorrect as it misunderstands the .trim modifier. The .trim modifier will remove white space at the beginning and end of a provided value. So that, for example `" Hello "` becomes `"Hello"`. Whereas OP is asking how to allow spaces in the validation. so that `"Hello Bob"` is accepted as a valid value. The built in validator alphanum or alpha only allow `[0-9A-Za-z]` and `[A-Za-z]` respectively. – SlyDave Jul 21 '20 at 12:50

score 0 · Answer 2 · answered Jul 21 '20 at 13:15

Your regex is close to being correct:

Try this

isNameValid: helpers.regex('isNameValid',/^[a-z0-9_ ]*$/i),

All you were missing is the start and end slashes for the expression, these are needed for JavaScript to know that you're referring to a regular expression - more information on that can be found here: https://stackoverflow.com/a/32120870/8298506

I also removed the A-Za-z and replaced it with the /i flag which is the case insensitive flag which will result in [A-Z] matching [A-Za-z]

It is worth noting that [A-Za-z0-9_ ] is equivalent shorthand [\w ]

Please understand that these will ONLY match A-Za-z, it will not accept accented characters, or Greek, or Russian etc. If internationalisation support is important to you, you'll need to look up a solution for regexp-unicode - details of which are a little outside the scope of this answer, but here is a starting point https://javascript.info/regexp-unicode

Name Alpha Validations Not Allowing Spaces

2 Answers2