Simple Input Formatter
See an example https://jon49.github.io/simple-input-formatter/.
Format the input element to whatever you like and only submit the raw data.
This custom element is 1.1 kB minified.
Define your formatter:
(() => {
let USDollar = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
window.currency = {
format(value) {
return USDollar.format(value)
},
isValid(value) {
return (isNaN(value))
? 'Must be a number'
: ''
}
}
})()Put on your HTML page:
<form>
<format-input data-format="currency">
<input
type="number"
step="2"
name="test"
placeholder="Give me a number!">
</format-input>
<button>OK</button>
</form>See the tests to see how it works!
Change Log
0.3.0
Improved handling of invalid data.
Added ability to insert error message in element using data-show-invalid.