CODEWITHSUNDEEP
javascriptc#jquerycssasp.net
LogicalDesk
LogicalDesk

Reputation: 1297

How to allow only Credit/Debit card number format in ASP.NET textbox

I have to allow only Debit/Credit card number format in asp.net textbox. Below is a sample screenshot-

enter image description here

Please let me know how to do this with asp.net textbox and I don't have to use validators.

Note: I only have to allow numbers and after every 4 numbers there should be a hyphen(-).

Upvotes: 4

Views: 2667

Answers (3)

PRASHANT KUMAR
PRASHANT KUMAR

Reputation: 185

You can do the following:

     <input type="text" onkeypress="return allowNumbersAndHyphen(event)">


  function allowNumbersAndHyphen(evt) {
  var charCode = (evt.which) ? evt.which : event.keyCode;
  //allowing numbers, left key(37) right key(39) backspace(8) delete(46) and hyphen(45)
  var length = $('input').val().length;
  if (((charCode == 37 || charCode  == 39 || charCode == 8 || charCode == 46 || charCode == 45) || !(charCode > 31 && (charCode < 48 || charCode > 57))) && length <19)
  {
    return true;
  }
  else{
     return false;
  }

  }
 //put hyphens atomatically
$(document).ready(function(){

$('input').on('keypress', function() {
  var temp = $(this).val();
  if (temp.length == 4 || temp.length == 9 || temp.length == 14) {
    $('input').val(temp + '-');
  }
});


$('input').on('blur', function() {
  var regex = /^[0-9]{4}-[0-9]{4}-[0-9]{4}-[0-9]{4}$/;
  var cardNumber = $(this).val();
  if(regex.test(cardNumber)) {
    //success
    alert('successful');
  }
  else {
    //show your error
    alert('Error');
  }
});

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- begin snippet: js hide: false console: true babel: false -->

Upvotes: 1

Yeldar Kurmangaliyev
Yeldar Kurmangaliyev

Reputation: 34244

I would strongly recommend you not to reinvent the bicycle and use jQuery inputmask plugin which will let you do the following:

$("input").inputmask({ 
  mask: "9999 9999 9999 9999",
  placeholder: ""
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.js"></script>

<input type="text"/>

Note that in this code I assumed that card number consists of 4 groups of 4 digits each, and it is not always true - it depends on expected cards' payment systems, country etc.
You can easily achieve any result by adding or removing digits in mask.

Upvotes: 2

August
August

Reputation: 1819

Using vanilla javascript 

document.getElementById('inp1').onkeypress = verify;
console.clear();

function isKeyValid(key) {
  if(key > 47 && key < 58) return true
  else if(key === 45) return true;
  else return false;
}
function isValidCard(arr, isDash) {
  const last = arr[arr.length - 1];
  if(last.length === 4 && !isDash) return false;
  else if(isDash && last.length !== 4) return false;
  else if(isDash && arr.length === 4) return false;
  else return true;
}
function verify(e) {
  const key = e.keyCode || e.which;
  const isDash = key === 45;
  const val = e.target.value;
  const input = val.split('-');
  if (!isKeyValid(key) || !isValidCard(input, isDash)) {
    return e.preventDefault();
  }
  // ...do something
}

Upvotes: 0

Related Questions