In order to create a Yew web application, one must create mechanisms to allow end users to interact with the system and provide data via online forms.
This is where form handling comes into play. Yew offers Rust’s rich type ecosystem which can be a great tool when it comes to ensuring data integrity on the client side.
What Is Form Handling?
Form handling is the validation of data, collected from a user using an online form, that is intended to be sent to the server for the purpose of accessing a resource, deleting a resource, modifying an existing resource, or creating a new resource on the server.
Importance of Form Handling
Form handling is an essential part of building an interactive web application.
It is important because you would want to ensure that you are collecting appropriate information from users and this is achieved by ensuring that your users are entering the correct details.
One way to ensure that users give the appropriate information is through form handling.
Form handling basically constrains users to fill in data within the permitted guidelines or restrictions that the online forms provide. Apart from that, the users are provided with appropriate feedback concerning the data they entered.
Let’s understand this with an example.
When you apply for a passport, you are required to fill out a paper or an online form that asks for personal information such as your name, address, date of birth, and other relevant details.
In this case, the form is the mechanism that allows you to input your data, and the passport office uses form-handling techniques to process and manage your application.
The form-handling process for passport filing involves several steps:
- Capturing the data:
The first step is to capture the data you provide on the form accurately. For paper forms, this might involve manually entering the information into a computer system, while online forms typically capture the data automatically.
- Validating the data:
Once the data is captured, it needs to be validated to ensure that it meets the required format and criteria. For example, the passport office might check that your name and date of birth match the records in their database or that your signature matches the one on file.
- Storing the data:
The validated data is then stored in a database, where it can be retrieved and processed as needed. The passport office might use this data to generate a passport, perform background checks, or communicate with you about your application.
- Performing actions based on the data:
Depending on the specific requirements of the passport office, the data might be used to perform other actions, such as printing a passport or sending you an email confirmation.
Overall, form handling is a critical part of the passport application process and is essential for managing user data accurately and securely.
For enhanced security, it is advisable to perform form handling on both the client side and the server side, especially for apps that use the client-server architecture.
Form handling also ensures safety against any possibilities of malicious data that may be used by hackers to breach servers, confirmation of passwords on the client side, validating emails, validating password strengths, limiting input field characters, and validating the payload.
Hands-on
The code used in this blog is found at the following repository: https://github.com/workfall/workfall-yew-forms
Dependencies and Installations
First and foremost ensure that you have Rust installed. The other setup for a Yew project including things like logging and web assembly target is found in this blog – How to Build a Rust WebAssembly Frontend App with Yew Framework?
For this blog, we shall focus on form handling. The dependencies for this application are as shown in the Cargo.toml below.
log and wasm-logger are for logging to the console, wasm-bindgen enables interfacing wasm modules and JavaScript APIs, serde and serde_json are for serializing and deserializing JSON data, and gloo-net enables features like fetch API for making HTTP calls.
Folder Structure
main.rs:
All the bootstrapping should be done in this file.
app.rs:
In this file, we define all the routes for the application.
input.rs:
This is a generic input field component. By giving it the appropriate props, we can create various form fields such as text, email, and password.
home.rs(1):
As of the writing of this blog, Yew is at version 0.20 and the best solution when it comes to creating controlled forms is to use Node Refs.
Meaning that we are directly accessing DOM elements. In the future, there might be a more conventional way of achieving this.
The other way might be to use onchange event on input fields but that might be expensive in the long run.
The less expensive way is to use the onsubmit event on the form and then finally serialize the data in JSON format and then make the HTTP call to the server together with the payload.
We register a handler to handle the event after it fires in the DOM. Note that inside the handler, we clone to avoid moving the original values.
Especially we don’t want the Node Refs to go out of scope.
home.rs(2):
home.rs(3):
index.scss(1):
index.scss(2):
The image below shows an example of how the application looks like:
Conclusion
In this blog, we learned how to perform form handling and validations in the Rust Yew framework.
We used a simple form to show how we can create the validations in such a manner that the submit button will always be inactive in case the form is not duly filled or in case there are any validation errors.
We also looked at how we can handle DOM events using callbacks such as the onsubmit event which is fired when a form is submitted.
Moreover, we got to see how beneficial Rust’s rich type ecosystem is when it comes to writing clean and type-safe code. We will come up with more such use cases in our upcoming blogs.
Meanwhile…
If you are an aspiring Rust Developer and want to explore more about the above topics, here are a few of our blogs for your reference:
- How to Build a Rust WebAssembly Frontend App with Yew Framework?
- How to Create a REST API with Rust Rocket Framework and Diesel Middleware with PostgreSQL Database?
- AWS is in love with RUST and you should be too!
Stay tuned to get all the updates about our upcoming blogs on the cloud and the latest technologies.
Keep Exploring -> Keep Learning -> Keep Mastering
At Workfall, we strive to provide the best tech and pay opportunities to kickass coders around the world. If you’re looking to work with global clients, build cutting-edge products and make big bucks doing so, give it a shot at workfall.com/partner today!
