Only allow specific characters in input

Question

I have an input tag like so:

<input type="text" name="eventstarttime" list="eventstarttime" placeholder="Start Time" required>

and for this, it is allowed to have the time in it, so anywhere from 00:00 to 12:00 . but i basiclly want to also allow people to type in there time, but i want it to be constrainted to only being allowed to type in either one of the values that is presented in the datalist based on the javascript i have, or only allows them to type in a time between the said times above. here is the js:

<% var arrayOfTimes = []; %>                  
              <% for (var i = 0; i <= 48; i++) { %>
                <% var n = Math.floor(i/4) + [":00", ":15", ":30", ":45"][i%4]; %>
                <% if(n<10) %>
                    <% n = ''+n; %>
                <% arrayOfTimes.push(n); %>
                <% console.log(arrayOfTimes); %>
              <% } %>
              <input type="text" name="eventstarttime" list="eventstarttime" placeholder="Start Time" required>
              <datalist id="eventstarttime" required>
                <% for (var i = 0; i < arrayOfTimes.length; i++) { %>
                  <option value="<%= arrayOfTimes[i] %>">
                <% } %>
              </datalist>

and the returned results are like so:

[
  '0:00',  '0:15',  '0:30',  '0:45',  '1:00',
  '1:15',  '1:30',  '1:45',  '2:00',  '2:15',
  '2:30',  '2:45',  '3:00',  '3:15',  '3:30',
  '3:45',  '4:00',  '4:15',  '4:30',  '4:45',
  '5:00',  '5:15',  '5:30',  '5:45',  '6:00',
  '6:15',  '6:30',  '6:45',  '7:00',  '7:15',
  '7:30',  '7:45',  '8:00',  '8:15',  '8:30',
  '8:45',  '9:00',  '9:15',  '9:30',  '9:45',
  '10:00', '10:15', '10:30', '10:45', '11:00',
  '11:15', '11:30', '11:45', '12:00'
]

so i would want them to only be able to type in one of those values essentially. Now my question is, can i do this directly through the input tag, like specificy the number of charcaters and the type of characters, or does it have to be done through js? Wasn't able to find anything online.

Answer 1

Try using regular expressions, well this is not the exact answer but I think you can do it using regular expressions (regex in js). All you to do is to search or construct the regular expression for your case.

Answer 2

A simple solution is to use the pattern attribute on the <input> element. Reference

Input any time not in your list and it should prompt you to input the requested pattern. When you input one of the times it will not prompt you. You'll need to hit the submit button to see the prompt.

Note: times in this input may begin with 00 (like 00:15).

 document.forms[0].onsubmit = e =>e.preventDefault();

 <form> <input pattern="[01]?[0-9]:(15|30|45|00)" placeholder="XX:XX (quarter hour)"> <button>Submit</button> </form>

Answer 3

 input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } div { position: relative; }

 <label>Choose a time for your meeting: <div> <input type="time" name="time" min="00:00" max="12:00" step="900" required> <span class="validity"></span> </div> <small>from 00:00 to 12:00</small> </label>