JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="wrapper">
  <p>
    Our goal: 1111-1111-1111-1111
  </p>
  <input name="code" maxlength="19">
  <span class="check"></span>
</div>

JavaScript

$('.wrapper').on('keyup', 'input[name="code"]',function() {
	var $input = $(this);
  var $check = $input.parent().find('.check');
  
  $input.val($input.val().replace(/ /g, ''));
  $input.val($input.val().replace(/--/g, '-'));
  $input.val($input.val().replace(/(\d{4})(\d{4})(\d{4})(\d{4})/, "$1-$2-$3-$4"));
  
  if($input.val().length === parseInt($input.attr('maxlength'))) {
  	$check.html("valid");
  	return false;
  }

  if($input.val().length >= parseInt($input.attr('maxlength'))) {
		// code was cutted
  	$input.val($input.val().substr(0, parseInt($input.attr('maxlength'))));
    $check.html('check code');
  	return false;
  }  
  
  $check.html('invalid');
});