CODEWITHSUNDEEP
javascriptvalidationvue.js
user6385799
user6385799

Reputation:

Delete the letter 'e' when you type a phone number in a form input

I have an app build on front end with VueJS and Element io. I tried to to the validation for phone number but I saw that letter you can type letter e in the form input.

I try to delete the last letter that the user typed, the 'e', or to not let the user to type that letter if I found that is 'e'.

I tried a few things that I found on the internet but didn't work.

This is the input with the latest try, that still doesn't validate:

<el-input 
  v-model="newUser.phone"  
  type="number"
  v-validate="{required: true, max: 13}"  
  name="Phone" 
  @keyup="newUser.phone ? newUser.phone.substring(newUser.phone.length, newUser.phone.length -1) : 'true'">
  <template slot="prepend">07</template>
</el-input>

This one was the prev version where I tried with vee-validate to not let the user to submit the form because the phone number is not valid:

<el-input 
  v-model="newUser.phone"  
  v-validate="{required: true, max: 13, regex: /^\d+$/}"  
  name="Phone" 
  :class="{redBorder: errors.has('Phone')}" >
  <template slot="prepend">07</template>
</el-input>

This works, I get the error, under input: The Phone field format is invalid.

If someone knows how to delete the 'e' or not let the user to type 'e', please tell me, because that is more strict.

Upvotes: 0

Views: 369

Answers (1)

Shawn Janas
Shawn Janas

Reputation: 2743

Try this:

<el-input 
v-model="newUser.phone"  
type="number"
v-validate="{required: true, max: 13}"  
name="Phone"
v-on:keypress="isNumber(event)">
<template slot="prepend">07</template>
</el-input>

In Methods Function:

isNumber: function(evt) {
    evt = (evt) ? evt : window.event
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if ((charCode > 31 && (charCode < 48 || charCode > 57)) && charCode !== 46) {
        evt.preventDefault()
    } else {
        return true
    }
},

Upvotes: 1

Related Questions