1

I have a client who wants me to punctuate all currency inputs with commas and dollar signs. This means that I have to use a text input instead of a number input, which means that I cannot take advantage of the inbuilt validation that number inputs have, chiefly min, max, step, and simply validating that what the user enters is in fact a numeric string. My idea is therefore to create a text input copy of the actual numeric input, hide the actual one, format the contents of the text input as the user types, and copy them over into the hidden numeric input so that they can be validated and submitted from there. What is the best way with javascript to display any validation errors that might pop up from the hidden number input? I am specifically looking at the constraint validation api:

https://developer.mozilla.org/en-US/docs/Web/API/Constraint_validation

Here's the example html:

<!-- hidden actual input field -->
<input id="real" name="cost" type="number" min="0" max="1000" step=".01" style="display:none;" />

<!-- visible, fake, punctuated input field -->
<input id="punctuated" type="text" />

So I am wanting to find a way to take any validation objects in the DOM for the first input and copy them over to the 2nd. I have tried this so far (see below), but it appears that the validity and validationMessage DOM properties are readonly:

var punctuated = document.getElementById('punctuated');
var real = document.getElementById('real');
punctuated.validationMessage = real.validationMessage;
punctuated.validity = real.validity;
TylerH
  • 20,799
  • 66
  • 75
  • 101
kloddant
  • 1,026
  • 12
  • 19
  • can you please share some code – rags2riches-prog Dec 18 '20 at 18:07
  • 2
    You can call a function oninput and match the input text with regex equation to check the validation, no need of hidden field. Give it a try – NaturalCoder Dec 18 '20 at 18:16
  • @rags2riches Done, sorry. – kloddant Dec 18 '20 at 19:38
  • @NaturalCoder Thank you for the suggestion, but I want to avoid that if possible. If I can just copy the validity and validationMessage DOM properties of the first input to the second, then that would be simpler, shorter, less error-prone and more generically applicable than writing custom regular expressions and other custom validators. – kloddant Dec 18 '20 at 19:42

2 Answers2

1

First option: To add the same class to both inputs and use document.getElementsByClassName('some-class')

Second option: To use a single input and on (keyup) call the validation function which will check if the user input matches the regex you need

savinn
  • 68
  • 8
0

This appears to be the answer:

punctuated.setCustomValidity(real.validationMessage);

I just bound that to the page load, and a click and keyup event for the punctuated input, and it seems to work. So when the user types stuff into the punctuated input, it gets copied over to the real input and validated using the html attributes, and then the click and keyup events pass the validation message to the punctuated input.

kloddant
  • 1,026
  • 12
  • 19