1

my target is to accept only divisible by 5. When I type 6 and it is not divisible by 5, produce an alert error "This number is invalid". How can I make it work? My current work is when it's not divisible by 5, the input type number gets red.

:invalid {
    background: red;
}
<input type="number" min="0" max="9000" step="5" />
Ulquiorra Schiffer
  • 219
  • 2
  • 15

4 Answers4

2

If only CSS is the way you want to achieve this without the alert and a sibling element, You can do so by introducing an additional p element and only making it visible when the sibling input is invalid like so :-

p{
display:none;
}

input:invalid{
background:red;
}

input:invalid + p {
    display:block;
}
<input type="number" min="0" max="9000" step="5" />
<p>This number is invalid</p>

Otherwise there are already so many JS ways to do the same which can be found on Stack Overflow.

Lakshya Thakur
  • 8,030
  • 1
  • 12
  • 39
2

If you want use Pure js you can use this function see if number is divisible by 5 like:

const inputs = document.querySelectorAll('input[data-id="inputnumber"]');
inputs.forEach(input => {
  input.addEventListener('change', () => {
    if (input.value % 5 !== 0) {
      alert('not valid');
      input.value = 5;
    }
  });
});
:invalid {
  background: red;
}
<input type="number" min="0" max="9000" step="5" data-id='inputnumber' />
<input type="number" min="0" max="9000" step="5" data-id='inputnumber' />

i add a simple reset by 5 if is wrong

After comment of OP i changed my snippet to make it work with 2 or more inputs with data-id

Simone Rossaini
  • 8,115
  • 1
  • 13
  • 34
  • Hello, is it okay for me to add a follow-up question? What if I have 2 input type? i have tried it with one and it is perfectly working, however when I'm doing 2 input type with the same IDs it's not working anymore. – Ulquiorra Schiffer May 19 '21 at 08:21
  • 1
    I changed the example to fit your second question :) – Simone Rossaini May 19 '21 at 08:33
  • 1
    Another idea, if you need to change the number to divide, for example 1 input % 5 and another %6 you can use data attribute for change it :) – Simone Rossaini May 19 '21 at 08:55
0

You can also catch the invalid value and display you own message. Here you don't have to test the value. To remove the massage again you have to look for either change, keydown, paste or input.

document.forms.test.num.addEventListener('invalid', e => {
  e.preventDefault();
  document.getElementById('message').classList.remove('hide');
});

document.forms.test.num.addEventListener('input', e => {
  document.getElementById('message').classList.add('hide');
});

document.forms.test.addEventListener('submit', e => {
  e.preventDefault();
});
input:invalid {
  background: red;
}

span.hide {
  display: none;
}
<form name="test">
  <input name="num" type="number" min="0" max="9000" step="5" />
  <span id="message" class="hide">This is not a valid number!</span>
</form>
chrwahl
  • 8,675
  • 2
  • 20
  • 30
-1

<input type="number" name="pax" min="0" max="100" step="5" value="0">
Manish Pushkar Jha
  • 138
  • 9