maxlength on input type number

by Faisal Khan Janjua

HTML

<p>Only Pink fields has valiadtion</p>
<p>6th &amp; 7th fields should not have validation, 6th(no number in class), 7th(length is not a number)</p>

<input class="big maxlength2 top hold" type="text" />
<input class="maxlength4 big top grid" type="text" />
<input class="big top stop" type="text" />
<input class="maxlength10 big top stop" type="text" />
<input class="big top stop" type="text" />
<input class="maxlength big top stop zero" type="text" />
<input class="maxlengtha big top stop zero" type="text" />

<button>AJAX Load</button>

CSS

p{
  margin:0;
}
button {
  margin-top: 10px;
}
input {
  outline: none;
  display: block;
  margin-top: 10px;
  border: 2px solid #ccc;
}
input[class*="maxlength"] {
  border: 2px solid #F99;
}

JavaScript

alert('Ready');

$(document).on('input', 'input[class*="maxlength"]', function () {
  var digLength = $(this).attr("class").split('th')[1].split(' ')[0];
  if(digLength>0){ this.value = this.value.substring(0, digLength); }
});

var elements = '<input type="text" class="maxlength5" /><input type="text" class="maxlength6" />';

$(document).on('click','button', function(){
	$('body').append(elements);
});