Form Validation in iOS Apps Made Easy With RxSwift

Implement input form validation with two practical examples

Published in

Better Programming

6 min readApr 28, 2021

Male on a hammock in front of a waterfall — Photo by Jeremy Bishop on Unsplash

I know that “RxSwift” itself sounds like a big and difficult thing. I was feeling the same when I started working on it. We are all learners. One of the best ways to learn is by adopting the implementation into an existing project. In this article, we will focus on the implementation of form validation in RxSwift.

RxSwift is Reactive Extensions (Rx) for Swift language. It is a well-known library and widely used by iOS developers, especially in MVVM patterns. For more understanding on definition and overview, you may refer to good articles written in Hackernoon and Raywenderlich.

Observable, Subscriber and Subjects

First, you should know that RxSwift is basically about Observable and Subscriber. Both are important elements in RxSwift.

Observable. As the word describes, it is any variable or object that can be observed and able to notify its observers. So, it will keep telling the observer about event changes.
Subscriber aka observer. It subscribes to the Observable object to continuously receive notifications.
Subjects. Simple, it has both capabilities: the Observable and Subscriber.

Data Binding

A process to bind a data to intended action or UI.

For example, in a “Reset Password” form, the user is required to enter a valid email so that the submit button will be enabled to click.

In this case, we need to have the following:

A variable, let’s say, isValidEmail (a Bool), in which the value is determined based on the email entered in a TextField (isValidEmail subscribes to the TextField changes).
Then, the value of that isValidEmail is bound to a submit button. So, whenever isValidEmail is true, the button will be enabled. This is its .normal state. As soon it becomes false, the button will change to its .disable state. Cool!

In short, a value can bind to a UI and vice versa.

Dispose Bag

In RxSwift, Subscription cannot be disposed of by itself. Thus, we need to create a bag, which is used to collect all disposable subscriptions in order to properly avoid memory leaks. You will see the usage in the code.

There are two scenarios that we will work on:

Reset password form (single TextField validation)
Sign up form (multiple TextFields validation)

Reset Password Form

Gif. Typing “hello@example.com” into the textfield

In this section, we are going to use the observer for the email TextField. Once the value becomes a valid email, the “Submit” button will automatically become enabled and vice versa. Wow! 🤩

First, create a new project and add a UITextField and UIButton outlets. Then, link the outlets to ViewController:

Set the Submit button properties for disabled state with .gray text color to differentiate the button state during the rx emitting event (you may set the text color for .disabled programmatically).

Now, we need to update our ViewController. Here is the code, and the explanation is after it:

Import the RxSwift and RxCocoa library at the top.
Add new variable call emailSubject. You will notice that we are using BehaviorRelay for the email variable, and it is type String (optional). It is a Subjects type, and it can receive a value from the TextField and will also emit events to subscriber every time the value changes (including the initial value). The “value” at the end of the row is a parameter for the initial value required.
Add disposeBag as explained before (to deallocate memory).
Setup the UI Bindings. Add a new function setupBindings(), and add code to bind any changes in the TextField into emailSubject.
emailSubject will emit event if these steps occur. Check the flow.
a. In map(), once the event is received, we map (transform) the value into Bool to check if the email string is correct (using simple String extension validateEmail()— check the bottom of the code.
b. Then, we bind the result into submitButton to change rx state of isEnabled
c. Last, dispose of the subscription into that bag.
A String extension with a function to validate email format using RegEx.
A String extension with a function to validate email format using RegEx.

Yes, we’re done with our first validation form. The submit button is now secure and cannot be clicked, unless the email is valid.

Extra Tips 💡

Actually, number five can be simplified a bit by adding a new variable, isValidEmail as Observable<Bool>, to capture the emailSubject result. Here’s the code:

Sign Up Form

In this section, we are going to do the same validation but with multiple fields. The form has three fields: name, email, and password. The requirements are:

Name cannot be empty or nil
Check if the email is valid
Make sure password format is correct with more than six characters (this is just an example, you may add your own rules using regex or other methods)

To make our code cleaner, we will break it into ViewController and ViewModel. ViewController will handle the UI setup and binding, while the ViewModel will handle the validation logic.

ViewModel

Before we start updating our Controller, let’s complete our ViewModel as the Controller dependency. Add a new file called “SignUpViewModel.swift” and add a new class SignUpViewModel as shown below:

The explanation of the previous code is below.

Add necessary variables to listen to the event change on the TextField including name, email, and password.
The unique part is isValidForm. Previously, we only checked on a single field. Now, we combine all observables values and return them as one result using combineLatest(). So, in ViewController, the subscriber will simply observe isValidForm to ensure the form is currently in a valid state.

ViewController

First, create a new UIViewController called SignUpViewController, and add a new scene to storyboards with TextField and Button outlets. Then, connect them with the SignUpViewController.

Let’s take a look at SignUpViewController. The code is simplified when we are using viewModel:

From this ViewController we understand the following:

Add outlets for textfields and button (make sure to set .disable state of button title color to gray as we did before)
submitButton.setTitleColor(.gray, for: .disabled)
Create viewModel object from class SignUpViewModel to handle the validation
Bind TextFields to viewModel
Bind value of isValidForm to submit button to automatically change the button state.

Awesome. Now you have mastered form validation using RxSwift. Try to implement them in your existing projects gradually, perhaps with more rules and variation. You may also explore other methods of doing the form validation. Download my full source code here.

Hopefully this article will help you learn RxSwift. Thanks for reading. Don’t forget to clap 👏 and share with your friends. Feedback is most welcome.