How to only allow roman numeral characters in html input?

Question

How do I only allow roman numerals characters to be typed in this input? Please comment if I am missing something when asking the question.

<label for="rtnInput">Enter Roman Numeral:</label>
<input type="text" id="rtnInput">

@aka_aaryank you can do something like this in your javascript if someone enter a number you can convert it into roman numerals. If that works i can help you with that. — , Aug 18 '20 at 05:55

score 3 · Answer 1 · answered Aug 18 '20 at 05:56

3

If you're using the html attribute pattern for input/form validation, you can pass a regex to pattern like so:

<input type="text" id="rtnInput" pattern="^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$" />

referencing the roman numeral regex found here: https://stackoverflow.com/a/267405/5912253

answered Aug 18 '20 at 05:56

Luis

31
2

2

This seems to be the best way, adding a `pattern` attribute with the regular expression. Just one note, conserning validation and accessibility, you should consider adding custom validation message to the input with a message regarding accepting the roman numerals with `setCustomValidity()`. https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation#Constraint_validation_interfaces – Miloš Miljković Aug 18 '20 at 06:01
Did not work - here is link: https://aaryank.codewizardshq.com/RomanC/index.html – aka_aaryank Aug 18 '20 at 06:06
What values are you using? I get the "Invalid Characters" window alert (as expected?). – Luis Aug 18 '20 at 06:32
@Luis You can see in the link i gave you if you just open up my project then CTRL+U – aka_aaryank Aug 18 '20 at 14:31

score -1 · Answer 2 · answered Aug 18 '20 at 05:58

-1

The only thing I could think of right now is a drop down menu

    <select name="number" id="RNumbers">
            <option value="I"> I </option>
            <option value="II"> II </option>
            <option value="III"> III </option>
            <option value="IV"> IV </option>
            <option value="V"> V </option>
    </select>

answered Aug 18 '20 at 05:58

Squashie01

11
3

Welcome to StackOverflow! As @Luis has told, that's not the only way to get the desired result, so please Edit your answer – xKobalt Aug 20 '20 at 13:37

How to only allow roman numeral characters in html input?

2 Answers2