check for new participant number between 1 and 100 on tracking page #84
Conversation
client/track.html
Outdated
| @@ -111,8 +118,8 @@ <h2 class="text-center">Add participants</h2> | |||
| <form> | |||
| <div class="form-group"> | |||
| <label class="control-label" for="participants-count">New participants</label> | |||
| <input type="number" id="participants-count" class="form-control" placeholder="0" pattern="^[1-9]\d*{1,5}$" | |||
| autocomplete="off" required/> | |||
| <input type="number" id="participants-count" class="form-control" min="1" placeholder="0" pattern="^[1-9]\d*{1,5}$" | |||
There was a problem hiding this comment.
This doesn't match the JS check
| // Generate new participation links | ||
| $('#participants-submit').on('click', function (e) { | ||
| e.preventDefault(); | ||
|
|
||
| var pc = parseInt($('#participants-count').val()); | ||
|
|
||
| if (pc < 1.0 || pc > 100.00) { |
There was a problem hiding this comment.
Can we just use the number type with min and max? https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
There was a problem hiding this comment.
Using the min/max only limits using the up/down arrows within the input box.
A user could still type in something below 1 or above 100.
the parseInt is to ensure that the participant count is an integer since users can input a fraction. should I floor/ceil instead?
There was a problem hiding this comment.
Can't believe I'm linking to W3Schools, but ... https://www.w3schools.com/html/tryit.asp?filename=tryhtml_input_number
The user can input a higher number, but when trying to submit the browser should stop them. Of course this is only a client-side check, and browser-dependent, so if we care enough we should implement the same check on the server.
There was a problem hiding this comment.
I think we have already discussed this but the code above is doing the client-side check.
Otherwise just setting max/min doesn't execute a check.
resolves #76