Javascript not to let an input enter more or less

Question

Javascript to accept 16 characters(all numbers), not less or not more

<div class="col-xs-4">
<div style="text-align:left;" class="form-group">
<label for="credit0_number">Credit Card Number</label>
<input type="number" class="inp form-control" id="credit0_number" name="credit0[number]" >
</div>
 </div>

I tried maxlength = '16' but it did not work I also did min="16" max = "16" , it didnt work as well what can I do?

Answer 1

maxlength only limits the length of the input to 16 characters. Min and max are only available for input type number and they limit the actual value, not the length of the value (length of the string).

I believe you are trying to validate a credit card? You could use the pattern attribute and a regular expression:

<input type="text" pattern="[0-9]{13,16}" required>

This means any number containing the digits 0-9 and 13-16 chars in length. If you only want to allow 16 chars, try this:

<input type="text" pattern="[0-9]{16}" required>

Answer 2

If these input fields are wrapped in a form, you can use an [onsubmit] listener on the form.

If you are using jQuery, you can do that like this:

$("#id-of-your-form").on("submit", function(event) {
    var len = $("#credit0_number").val().length;
    if (len != 16) {
        event.preventDefault();

        // Show an error message here
    }
});

EDIT

If you also want to check on keyup, you could do something like this:

function validCredit() {
    return $("#credit0_number").val().length == 16;
}

$("#id-of-your-form").on("submit", function(event) {
    if (!validCredit()) {
        event.preventDefault();

        // Show an error message here
    }
});

$("#credit0_number").on("keyup", function(event) {
    if (!validCredit()) {
        // Show an error message here
    }
});

Answer 3

Addition to @HaukurHaf's answer, you need wrap your form with <form> to show the validation message.

Without tag:

<div class="col-xs-4">
  <div style="text-align:left;" class="form-group">
    <label for="credit0_number">Credit Card Number</label>
    <input type="text" pattern="[0-9]{13,16}" required>
    <input type="submit">
  </div>
</div>

With tag:

<form>
  <div class="col-xs-4">
    <div style="text-align:left;" class="form-group">
      <label for="credit0_number">Credit Card Number</label>
      <input type="text" pattern="[0-9]{13,16}" required>
      <input type="submit">
    </div>
  </div>
</form>

Answer 4

If you don't want to use HTML5 attributes, you may want to have a pure JavaScript implementation using regular expressions and the input event (click and keyup are not good enough because the user can use his mouse or keyboard with an input[type="number"] ).

The pattern you want is certainly /^\d{16}$/ to be sure that there are only 16 numbers in the field.

var num = document.getElementById('num');

num.addEventListener('input', handler, false);

function handler() {
  var pattern = /^\d{16}$/;
  if (pattern.test(num.value)) {
    console.log('---> OK <---');
  } else {
    console.log('KO');
  }
}

<input id="num" type="number">

Answer 5

did you try to put the input inside a form?

And using a pattern works fine for me:

<input type="text" pattern="\d{16}">

Answer 6

Add an onkeypress to allow only numbers to keyed. Then add an input pattern to only allow 16 characters.

<form>
  <div class="col-xs-4">
    <div style="text-align:left;" class="form-group">
      <label for="credit0_number">Credit Card Number</label>
      <input pattern="[0-9]{16}" type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
      <input type="submit">
    </div>
  </div>
</form>