how can I count number of digits with leading zeros in javascript?

Question

I have a form where a user enters a number, say an employee ID number or something like that. The field is set to reject anything that's not a number, so they can't just put in "bob" or faceroll the keyboard or whatever. Otherwise I'd convert this to a string.

I need to further validate and make this form reject anything that doesn't match the correct number of digits, lets say 5. It also needs to count leading zeros. For example - let's assume an Employee ID of 01234, which should match 5 digits. Currently, I'm losing that leading zero and it's rejecting values like the example above.

So, how can I:

count the number of digits in this number,
preserve leading zeros,
make sure they user is obligated to enter a number, with a JavaScript formula?

We need to see your code and what you've tried – Aniket G Feb 25 '19 at 00:52 — Aniket G, Feb 25 '19 at 00:52
store the "number" as a string, then just use .lenght – Ignacio Martínez Feb 25 '19 at 01:08 — Ignacio Martínez, Feb 25 '19 at 01:08

score 2 · Answer 1 · answered Feb 25 '19 at 01:05

2

You should go with your original idea and use a string for such a field. You can check whether the string is a number with a simple regex such as

let regex = /^[0-9]*$/;
regex.test(string);

It should return true if the string contains only digits.

answered Feb 25 '19 at 01:05

Demvamko AndrijaKovac

97
2
10

Nice Answer, you should update the answer though to complete it. I.e, if it is true, then calculate the length of the string with regex = regex.split(""), let length = regex.length for example :) – Spangle Feb 25 '19 at 01:24

score 1 · Answer 2 · answered Feb 25 '19 at 01:11

If you get the input element's value with element.value it will return a string that preserves leading zeroes.

Limiting the input field's characters is covered in HTML text input allow only numeric input

I've copied and modified the example below to show an input field that only accepts up to 8 numbers and will log the ID on submit.

// Restricts input for the given textbox to the given inputFilter.
// Source: https://stackoverflow.com/a/469362
function setInputFilter(textbox, inputFilter) {
  ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) {
    textbox.addEventListener(event, function() {
      if (inputFilter(this.value)) {
        this.oldValue = this.value;
        this.oldSelectionStart = this.selectionStart;
        this.oldSelectionEnd = this.selectionEnd;
      } else if (this.hasOwnProperty("oldValue")) {
        this.value = this.oldValue;
        this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd);
      }
    });
  });
}

const inputField = document.getElementById("employee-id");
const submitButton = document.getElementById("submit");

setInputFilter(inputField, function(value) {
  return /^\d*$/.test(value) && (value.length <= 8);;
});
submitButton.addEventListener('click', event => {
  console.log(inputField.value)
})

User ID: <input id="employee-id">
<button id="submit">submit</button>

score 0 · Answer 3 · answered Feb 25 '19 at 01:42

Try this.

<input id="number" type="text" minlength="5" maxlength="5" value="42" pattern="\d{5}">

Check validity via JS

document.querySelector('#number').checkValidity()

check validity via CSS

input {
  outline: none;
  border: 1px solid green;
}
input:invalid {
  border: 1px solid red;
}

if you need further validation just use javascript to validate it.

how can I count number of digits with leading zeros in javascript?

3 Answers3