[Feature Request] Client-side (browser) form validation in Perspective

Client-side Input Validation in Perspective

With Perspective, we are able to create beautiful user interfaces for data collection, reporting, and even controlling machines. I often find myself creating forms for data collection and I was wondering if / when we will be able to use standard HTML input validation techniques for forms (and to create the “forms” themselves).

Here are a few examples of what I mean:

1. Creating HTML-style forms

This allows for better organization when grouping related inputs together. Also, there is an action attribute which specifies where the form data is to be sent (I don’t know how this would work with Perspective - it isn’t that important).

<form action="/my-endpoint">
    ...
</form>

In my experience, it would be very useful if we were able to create forms because of the next few points.

2. HTML required attribute

Having a Form component would allow us to do something like this:

<form action="">
    <label for="name_input">First Name:</label>
    <input type="text" id="name_input" name="name" required>

    <button type="submit">Submit</button>
</form>

renders this beautiful form:
image
The important thing here is what happens when we try to submit the form with the input empty (Chrome v91.0.4472.124):
image
This alert is added by the browser automatically (might look different in Safari/Firefox/Edge, etc) and doesn’t allow the user to submit the form until those fields contain valid inputs.

3. Email and other input types

Right now, many different HTML inputs are their own Perspective component. This makes sense, since a radio button and a password input are vastly different and it makes it easier on the developer when styling and customizing components. However, that does mean some well-supported input types like email and tel will need to be entered into a Text Field component and validated through scripting. The browser is capable of providing that functionality, it would be nice if we could harness it.
image

4. And so on…

Conclusion

I understand that “form validation” could be added through scripting (server-side). However, it makes sense for me, as a happy consumer of the Ignition platform, for some sort of validation to be built-in at the client level. Not a huge priority, but definitely a nice-to-have.

1 Like