When the value of a numeric entry field is outside of the input bounds, the values are still allowed in the element. You can use the errorStyle to show the user that the value is incorrect but is there a way to catch the value change and set the field back to a valid value on the UI?
For example, if I have the minimum input bounds set to 0 and keep hitting down on the entry value, it allows negative numbers. I would like to catch it at that point and set the value back to 0. Is this possible?
UPDATE: it appears to correct the value but only after the field has lost focus. I have tried catching various events but nothing seems to have any effect. Waiting to correct the value until focus is lost can be deceptive, especially if the next thing they press is a save button, they will never see the value reset back to a valid value.
While this doesn’t fix the issue, you could use the button mode as a workaround. You can’t apply the change if the value is not between the defined bounds.
You can’t prevent the user from inputting values into the field, because an incomplete value might be valid upon completion. Pretend you had defined a range of valid values for the input which was 10-30; if a user types “1”, then that’s outside your valid range but they could still then type a “0” and have their input be valid.
Just kind of design point/aside but don’t rely on GUI components for your validation. It is nice to have them but ultimately you should have some function that you is doing stuff with the user input data (usually inserting/updating into a database) and there validating that the values are in a valid range. It’s nice to have your business logic completely codified imo.
I agree and always do validation at both client and server. Unfortunately the change event that occurs in a typical input[type=number] isn’t exposed in Ignition. And because Ignition’s validation doesn’t occur until the element loses focus, the user can experience a situation where they enter an invalid value, immediately hit Save, validation occurs, value reverts and they are unaware.
If validation fails then the user should be notified, and records should not just “fall” through with reverted values. The entire update should be reverted as if the “Save” request never occurred.
I would argue that, an unexpected value being stored is still invalid, independent of if that value is within an acceptable range for that input or not.
It sounds like you probably want to put your own sort of value verification in place. I recommend a Numeric Entry Field with a custom property. Add a property change script on props.value to determine if the value is within a range (and do not use the default range properties). If the value is valid, write it to the custom property and set the component border to a green color. If the value is invalid, do not perform the write, and also change the border to red. Bind whatever you originally had bound or listening to props.value to the custom property instead. Keep in mind that color-coding inputs like this will only help a user so much; they might see that the value was invalid or unused, but the color will not tell them why it was invalid.