Restrict input to 5 characters if whole number or 8 characters with fraction

Question

I have simple text input:

 <div style="float:right" class="xField">
      <input id="userLength" name="userLength"/>
      <label style="margin-left: 3px;">m</label>
 </div>

I need this input to only accept numbers and if the number is a whole number, it should only allow 5 characters i.e. 12345. If the number includes a fraction, it should then allow for 8 characters i.e. 12345,99.

I've tried adding maxlength to the input but that only works with one of these conditions at a time.

How can I accomplish this?

Answer 1

You could use the pattern attribute and provide a regular expression that supports your requirements.

for example (this does not forbid entering invalid data, but will mark the field as invalid while the pattern is not matched).

<div style="float:right" class="xField">
      <input id="userLength" name="userLength" pattern="\d{1,5}(,\d{1,2})?" />
      <label style="margin-left: 3px;">m</label>
 </div>