Setting a validation message for a Vuejs username input while enforcing a maximum character limit

Question

Setting a validation message for a Vuejs username input while enforcing a maximum character limit

<script>
export default {
  name: "Register",
  props: {
    msg: String,
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}

div {
  padding: 0;
  margin: 0;
  font-family: system-ui;
}

.red {
  color: red;
}

<template>
  <div class="pop-up-mask">
    {{ msg }}
  <div class="input-wrapper"> 
          <div class="name-icon"></div>
            <input type="text" class="input-section" 
           placeholder="Enter your Name" :maxlength="max" v-model="text" />
         
        </div>
        </div>
        </template>


--------------in main.js--------------

new Vue({
 data: {
    max: 36,
    text: ''
  }
  render: h => h(App),

}).$mount('#app')

It is essential to keep the input text within a limit of 30 characters. If exceeded, a message saying “You can enter 30 characters only.” should be displayed. Although conditions were set in both the template and main.js file, the functionality is not working as intended.

javascript vue.js vuejs2

Answer 1

Answer №1

Consider utilizing the watch method

For more information, refer to the official Vue.js documentation on Watchers

<div class="pop-up-mask">
        {{ msg }}
        <div class="input-wrapper">
            <input
                type="text"
                class="input-section"
                placeholder="Enter your Name"
                :maxlength="max"
                v-model="msg"
            />
        </div>
    </div>

<script>
  import LazyImageVue3 from 'lazy-image-vue3'

export default {
  name: 'App',
    data: () => ({
    max: 36,
    text: '',
    msg: '',
  }),
  components: {
    LazyImageVue3
  },
    watch: {
    msg(text) {
      console.log(text.length)
      if(text.length === 30) {
        this.msg = 'You can enter 30 characters only.'
        console.log('You can enter 30 characters only.')
        alert('You can enter 30 characters only.', text.length)
            }
        }
    }
}
</script>

Answer 2

Consider utilizing the watch method

For more information, refer to the official Vue.js documentation on Watchers

<div class="pop-up-mask">
        {{ msg }}
        <div class="input-wrapper">
            <input
                type="text"
                class="input-section"
                placeholder="Enter your Name"
                :maxlength="max"
                v-model="msg"
            />
        </div>
    </div>

<script>
  import LazyImageVue3 from 'lazy-image-vue3'

export default {
  name: 'App',
    data: () => ({
    max: 36,
    text: '',
    msg: '',
  }),
  components: {
    LazyImageVue3
  },
    watch: {
    msg(text) {
      console.log(text.length)
      if(text.length === 30) {
        this.msg = 'You can enter 30 characters only.'
        console.log('You can enter 30 characters only.')
        alert('You can enter 30 characters only.', text.length)
            }
        }
    }
}
</script>

Answer 3

Answer №2

Although client-side validation has its benefits, I suggest implementing server-side validation for the username instead. In this case, if the username is already taken or exceeds the character limit, the server should return a status code of 400. Your frontend can then handle this response to display an appropriate error message when a submission fails.

Answer 4

Although client-side validation has its benefits, I suggest implementing server-side validation for the username instead. In this case, if the username is already taken or exceeds the character limit, the server should return a status code of 400. Your frontend can then handle this response to display an appropriate error message when a submission fails.

Answer 5

Answer №3

insert the following code snippet: :disabled = 'disable == 1'

<div class="pop-up-mask">
        {{ msg }}
<p v-if="this.show">{{ text2 }}</p>
        <div class="input-wrapper">
            <input 
                :disabled = 'disable == 1'
                type="text"
                class="input-section"
                placeholder="Enter your Name"
                :maxlength="max"
                v-model="msg"
            />
        </div>
    </div>

add the line below to the code: this.disable = 1 watch

watch: {
    msg(text) {
      console.log(text.length)
      if(text.length === 30) {
        this.show = true
        this.disable = 1
        this.msg = 'You can enter 30 characters only.'
        alert('You can enter 30 characters only.', text.length)
            }
        }
    }

include disable: null in the data section

data: () => ({
    text2: 'You can enter 30 characters only.',    
    max: 36,
    text: '',
    msg: '',
    disable: null,      
  }),

If needed, you can display 'You can enter 30 characters only' conditionally

template

<p v-if="this.show">{{ text2 }}</p>

watch this.show = true

data show: false,

Answer 6

insert the following code snippet: :disabled = 'disable == 1'

<div class="pop-up-mask">
        {{ msg }}
<p v-if="this.show">{{ text2 }}</p>
        <div class="input-wrapper">
            <input 
                :disabled = 'disable == 1'
                type="text"
                class="input-section"
                placeholder="Enter your Name"
                :maxlength="max"
                v-model="msg"
            />
        </div>
    </div>

add the line below to the code: this.disable = 1 watch

watch: {
    msg(text) {
      console.log(text.length)
      if(text.length === 30) {
        this.show = true
        this.disable = 1
        this.msg = 'You can enter 30 characters only.'
        alert('You can enter 30 characters only.', text.length)
            }
        }
    }

include disable: null in the data section

data: () => ({
    text2: 'You can enter 30 characters only.',    
    max: 36,
    text: '',
    msg: '',
    disable: null,      
  }),

If needed, you can display 'You can enter 30 characters only' conditionally

template

<p v-if="this.show">{{ text2 }}</p>

watch this.show = true

data show: false,

Setting a validation message for a Vuejs username input while enforcing a maximum character limit

Answer №1

Answer №2

Answer №3

Similar questions

Update the value of the following element

Exploring a section of a react-chartjs Pie chart

Button fails to display as intended despite meeting conditions

Using JavaScript to extract variables from parsed JSON data

Setting a default action for an Ext.Ajax.request error situation

Highlighting of Vue directives in HTML within WebStorm

What is a way to execute a series of requests using rxjs similar to forkJoin and combineLatest, without needing to wait for all requests to finish before viewing the results?

Utilize images inputted via an HTML DOM file uploader within p5.js

Retrieving visual information from Google Street View entity

Keeping Chart.JS Up to Date: Updating Only Fresh Data

Leveraging the power of NextJS and Strapi: Efficiently fetching multiple API pages with a single getStaticPaths

Updating the state of Formik

The function inputLocalFont.addEventListener does not exist and cannot be executed

Managing input jQuery with special characters such as 'ä', 'ö', 'ü' poses a unique challenge

The reason why React.js does not automatically bind its functions to the "this" object

What is the best way to utilize date-fns for formatting a date retrieved from an API?

What are some techniques for ensuring a CSS div remains stable and intact when adjusting the browser size?

NPM - Include in package.json without installation

Adjust width based on value dynamically

Determine the type of a nested class within TypeScript