[Feature-1646, 3837] Client-side (browser) form validation in Perspective

General Discussion
,
1

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.

4 Likes
2

Up

3

Specifying the type of input elements is actually something that’s already on our backlog.
I’m not sure about the form handling - it’s a good idea, but may not actually work that well with Perspective - despite the URL navigation, really the entire Perspective session is a single page; what would you expect to happen on form submission?
I guess theoretically it could be a container type with a specific scripting hook that fires on form submission… I filed a ticket.

1 Like
4

Perfect! That’s gonna be super good!
Input elements validation is quite OK to me, I’d like to do submission manually and then decide where to go.

5

Any developments yet for this feature request?

It would be a real nice-to-have feature, so we can let the customer know that the input of a field is incorrect before they even press a 'confirm/submit' button. And this way it would be easier to see for the customer of which fields the input is incorrect.

Of course it would be more of an add-on, because I feel that validating via scripting would always be the most safe way to go.