CODEWITHSUNDEEP
javascriptregexvue.jsvuetify.jsspecial-characters
user12763413
user12763413

Reputation: 1349

How to restrict special characters but allow alphabets, numbers and space in v-text-field vuetify

Below is the text field for the company name. I don’t want to allow any special characters but I want to allow alphabets, space, and numbers. I am not sure how this can be achieved in vuetify. Any help to resolve this issue?

<v-text-field required
  label='Name' 
  class="required"
  v-model='company_name'
  :rules="userNameRule">
</v-text-field>

userNameRule: [
 value => !!value || 'Please enter company name'
]

Upvotes: 1

Views: 1844

Answers (2)

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27222

As per my understanding, You want to apply multiple validations on your company name input field.

  • Required field validation
  • Name must only contain alphabets, numeric and space.

If Yes, You can achieve the pattern validation using RegEx.

^[\w\s]+$ Explanation :

^ - The beginning of a line, matches the characters defined inside the [] at the start of a line.
\w - means any word character, which usually means alphanumeric (letters, numbers, regardless of case) plus underscore (_)
\s - matches whitespace character.
[] - A character class, which means match any character contained in the character class.
+ - matches one or more occurrences of the character defined inside the [].
$ - matches the end

Here is the live demo :

const { createApp } = Vue
const { createVuetify } = Vuetify

const vuetify = createVuetify()

const app = createApp({
  template: '#app-template',
  data() {
    return {
      company_name: ''
    }
  }
}).use(vuetify).mount('#app')
<script src="https://unpkg.com/vue@next/dist/vue.global.js"></script>
<script src="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@vuetify/[email protected]/dist/vuetify.css"/>

<script type="text/x-template" id="app-template">
      <v-text-field
        :rules="[
          v => !!v || 'Field is required',
          v => /^[\w\s]+$/.test(v) || 'Name must only contain alphabets, numeric and space'      
        ]"
        label='Name'
        v-model='company_name'
      ></v-text-field>
</script>

<div id="app"></div>

Upvotes: 2

Pierre Said
Pierre Said

Reputation: 3830

You can use v-form to trigger validation of the rule and use a regex for the rule.

<template>
  <v-app>
    <v-main>
      <v-form ref="form">
        <v-text-field required label='Name' class="required" v-model='company_name' :rules="userNameRule" />
        </v-form>
    </v-main>
  </v-app>
</template>

<script setup>
import { ref, watch } from 'vue';

const userNameRule = [
  (v) => /^[a-zA-Z0-9 ]+$/.test(v) || 'Name must be alphanumeric',
];
const company_name = ref('');
const form = ref(null);

watch(company_name, () => {
  form.value.validate();
});
</script>

https://vuetifyjs.com/en/components/forms/#props

Upvotes: 1

Related Questions