CODEWITHSUNDEEP
javascripthtmlwebforms
Dana Lagnud
Dana Lagnud

Reputation: 17

JavaScript to only allow numbers and certain length and no periods

I need help with a piece of JavaScript. I have this code:

<script>
function FilterInput(event) {
    var keyCode = ('which' in event) ? event.which : event.keyCode;
    isNotWanted = (keyCode == 69);
    return !isNotWanted;
};
function handlePaste(e) {
    var clipboardData, pastedData;
    clipboardData = e.clipboardData || window.clipboardData;
    pastedData = clipboardData.getData('Text').toUpperCase();
    if (pastedData.indexOf('E') > -1) {
        e.stopPropagation();
        e.preventDefault();
    }
};
</script>

I would like to limit the user's input to only 5 digits. For example, for this entry box, I'd like no more than five numbers to be allowed (12345 for example) and no periods:

<div class="col-md-3">
  <div class="form-group">
    <label>Customer Number</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-hashtag"></i></span>
      <input name="CustomerNumber" type="number" class="form-control" onkeydown="return FilterInput(event)" onpaste="handlePaste(event)" required>
    </div>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

How would I achieve this? I know for 

type="text"

it allows limiting spaces by using "maxlength."

Upvotes: 1

Views: 3110

Answers (5)

OKEAGU GODWIN
OKEAGU GODWIN

Reputation: 11

all the answers given here previously before mine are all outdated previous I think solving this question is best answered by

  1. Javascript slice is used to maintain character length
  2. Javascript replace to maintain only numbers are taken
  3. javascript oninput event to prevent the user does not use copy and paste to inject / input invalid character javascript.

<script>
function validate(field) {
   let val = field.value;
   let data = val.replace(/[^0-9]/g, "");
   field.value = data.slice(0,16);
}
</script>
<label for="atmno">Payment card Number</label>
<input name="atmno" type="text" oninput="validate(this)">

I briefly described the answer on an article I wrote here: https://shopinson.com/javascript/javascript-validates-payment-card-number/

Upvotes: 1

Sushanth --
Sushanth --

Reputation: 55750

You can run a validation check in your filterInput method.

document.querySelector('.input-group .form-control').addEventListener('keyup', function() {
var keyCode = ('which' in event) ? event.which : event.keyCode;
  isNotWanted = (keyCode == 69);

  if (this.value.length > this.maxLength) {
    this.value = this.value.slice(0, this.maxLength);
  }

  return !isNotWanted;
});
<div class="col-md-3">
  <div class="form-group">
    <label>Customer Number</label>
    <div class="input-group">
      <span class="input-group-addon"><i class="fa fa-hashtag"></i></span>
      <input maxlength="5" name="CustomerNumber" type="number" class="form-control"  required>
    </div>
  </div>
  <!-- /.form-group -->
</div>
<!-- /.col -->

Upvotes: 0

steff_bdh
steff_bdh

Reputation: 1188

A pure js and dom manipulation solution

Adding an Id attribute for simplicity 

<input type="number" id="in" />

We're going to listen for the keypress event and do nothing if the max length is met or a period is entered, i'm using 5 as the max.

let input = document.getElementById('in');
input.addEventListener('keypress',function test(e){
    if(input.value.length==5 || e.key=='.')
        e.preventDefault();
});

Upvotes: 0

mhodges
mhodges

Reputation: 11116

One way to do this is to trap the input, check if it passes your validation checks, and if so, proceed, if not, set it to the last known good value, like so:

var oldValue = "";
// listen for "input" event, since that handles all keypresses as well as cut/paste
document.getElementById("myInput").addEventListener('input', function (event) {
  var input = event.target;
  if (validateInput(input.value)) {
    // update old value with new value
    oldValue = input.value;
  }
  else {
    // set value to last known valid value
    input.value = oldValue;
  }
});

function validateInput(str) {
  // check length, if is a number, if is whole number, if no periods
  return /^[0-9]{0,5}$/.test(str);
}
Test: <input type="text" id="myInput"/><br/>
Try typing/pasting invalid input

Upvotes: 4

MWR
MWR

Reputation: 404

Well you could instead of choosing a number type input, use a text type input, where the maxlength attribute works and throw an error with JavaScript if the value is not a number. Like, 

if(isNaN(input.value)){ // error code here }

Upvotes: 0

Related Questions