JSFiddle - React, Tailwind, and code Playground

by polarnnn

HTML

<div>
  <label for="sddynamicmodel-zipcode">รหัสไปรษณีย์</label>
  <input type="text" id="sddynamicmodel-zipcode">
</div>
<div>
  <label for="sddynamicmodel-phone">เบอร์โทรศัพท์มือถือ</label>
  <input type="text" id="sddynamicmodel-phone">
</div>

JavaScript

//zipcode phone home_tel work_tel เป็นตัวเลข และจำกัดจำนวน text
$("#sddynamicmodel-zipcode").on('keypress keyup', function(e) {
  var len = $(this).val().length;
  if (len > 4 || (event.which < 48 || event.which > 57 && event.which < 96 || event.which > 105) && event.which != 8) {
    alert("กรุณากรอกเป็นตัวเลขจำนวน 5 หลัก");
    event.preventDefault();

  }

});
$("#sddynamicmodel-phone").on('keypress keyup', function(e) {
  var len = $(this).val().length;
  if (len > 9 || (event.which < 48 || event.which > 57 && event.which < 96 || event.which > 105) && event.which != 8) {
    alert("กรุณากรอกเป็นตัวเลขจำนวน 10 หลัก");
    event.preventDefault();

  }

});
$("#sddynamicmodel-home_tel").on('keypress keyup', function(e) {
  var len = $(this).val().length;
  if (len > 9 || (event.which < 48 || event.which > 57 && event.which < 96 || event.which > 105) && event.which != 8) {
    alert("กรุณากรอกเป็นตัวเลขจำนวน 10 หลัก");
    event.preventDefault();

  }

});
$("#sddynamicmodel-work_tel").on('keypress keyup', function(e) {
  var len = $(this).val().length;
  if (len > 9 || (event.which < 48 || event.which > 57 && event.which < 96 || event.which > 105) && event.which != 8) {
    alert("กรุณากรอกเป็นตัวเลขจำนวน 10 หลัก");
    event.preventDefault();

  }

});