0

I am trying to restrict user for entering value from 0 - 25 in an HTML inputbox. I have found some code of jquery but its converting larger of smaller value to 25 and 0 respectively. Please amend the code: Code for HTML input box and jquery:

<input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' onchange='handleChange(this);' required='required' style='width: 120px;'>

<script>
  function handleChange(input) {
    if (input.value < 0) input.value = 0;
    if (input.value > 25) input.value = 25;
  }
</script>
MrMaavin
  • 1,611
  • 2
  • 19
  • 30
Akhtar
  • 91
  • 11
  • 1
    For input type number, you can simply use HTML min and max attributes to restrict user input data. Try like this. – Pyae Phyo Aung Nov 06 '18 at 06:49
  • @pyaeaung put this as answer – Abdul Hameed Nov 06 '18 at 06:53
  • @pyaeaung i have tried this method earlier..but its not working. I think my input box name is obtmarks[] which getting an array. Thats why i was searching for jquery – Akhtar Nov 06 '18 at 07:00
  • take a look on my answer. This works only if you want to submit the form using the submit button of the form. This won't validate if you try to submit via ajax. – Patrick Schocke Nov 06 '18 at 07:18

5 Answers5

1

You can use the min and max attributes of HTML5 as suggested by @pyae-aung. Here's is your code. No JQuery needed just add the attributes for example min="0" and max="25".

See code below.

<input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' onchange='handleChange(this);' required='required' style='width: 120px;' min='0' max='25'>
MrMaavin
  • 1,611
  • 2
  • 19
  • 30
Faisal Rashid
  • 368
  • 1
  • 11
  • 1
    this only validates if you try to submit the form via html submit button. If you submit the form using ajax, this doen't do anything! – Patrick Schocke Nov 06 '18 at 07:19
1

You can simply create a web component that does exactly what you need:

class MyInput extends HTMLInputElement {
  constructor(...args) {
    const self = super(...args);
    self.min = this.getAttribute('min');
    self.max = this.getAttribute('max');
    self.addEventListener('input', (e) => {
      switch (true) {
        case self.value === '':
          break;
        case self.value < self.min:
          self.value = self.min;
          break;
        case self.value > self.max:
          self.value = self.max;
          break;
      }
    })
    return self;
  }
}

customElements.define('my-input', MyInput, { extends: 'input' });
<input type="number" is="my-input" max="25" min="0" />
connexo
  • 53,704
  • 14
  • 91
  • 128
0

Try this

$('[name="obtmarks[]"]').keyup(function(){
    if(parseInt($(this).val()) > 25){
        $('#div1').html('value cannot be greater then 25');
        $(this).val('');
    }
    else if(parseInt($(this).val()) < 1)
    {
    $('#div1').html('value cannot be lower then 0');
        $(this).val('');
    }
    else
    {$('#div1').html('');}
});
#div1{
   color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required'
      maxlength="2" style='width: 120px;'>

<div id="div1"></div>
Sooriya Dasanayake
  • 1,106
  • 1
  • 7
  • 14
0

Limit entering value using jQuery script

You can make it done by using jQuery

<input type="number" name="quantity">

<script>
    $("input[name='obtmarks[]']").change(function() {
      number = $("input[name='obtmarks[]']").val()
       if( number <= 0 || number >= 25 ) {
           $("input[name='obtmarks[]']").val("");
           alert("Enter values in between 0 to 25");
         }
       });
</script>
ASHWIN RAJEEV
  • 2,525
  • 1
  • 18
  • 24
  • thanks. But i cannot change input name to quantity. because its my input name is already obtmarks[] which is getting an array of numbers. Can you please amend with obtmarks[]. – Akhtar Nov 06 '18 at 09:05
  • @Akhtar you can use whatever name you have instead of quantity. – ASHWIN RAJEEV Nov 06 '18 at 10:19
-1

Try the below one its working fine for me. Use type=tel It works same as number. And little bit of inline Javascript.

<!-- <input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' onchange='handleChange(this);' required='required' style='width: 120px;' > -->

<input type="tel" name='obtmarks[]' class='form-control obtmark'  required='required' style='width: 120px;'  onKeyDown="if(this.value.length==25 && event.keyCode!=8) return false;"/>
Patrick Schocke
  • 1,493
  • 2
  • 13
  • 25
lifeisbeautiful
  • 817
  • 1
  • 8
  • 18
  • You should always use the element type that is appropriate for the data you expect. OP is not trying to create an input that asks for a telephone number. – connexo Nov 06 '18 at 07:34