CODEWITHSUNDEEP
javascript
sarah
sarah

Reputation: 87

Javascript not to let an input enter more or less

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?

Upvotes: 0

Views: 101

Answers (6)

Jason
Jason

Reputation: 268

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>

Upvotes: -1

Midgard
Midgard

Reputation: 402

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
    }
});

Upvotes: 0

Badacadabra
Badacadabra

Reputation: 8497

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">

Upvotes: 0

Fabian Mendez
Fabian Mendez

Reputation: 532

did you try to put the input inside a form?

And using a pattern works fine for me:

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

Upvotes: -1

Dalin Huang
Dalin Huang

Reputation: 11342

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>

Upvotes: 0

HaukurHaf
HaukurHaf

Reputation: 13796

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>

Upvotes: 6

Related Questions