DEV Community: Adriano Souza Costa

Form validation in SwiftUI using Formidable

Adriano Souza Costa — Wed, 12 Feb 2025 12:44:36 +0000

Ensure the rules and data consistency in your forms is the most important part of your app. This task is usually very tiring because of the lack of "resources" already available in Swift. With that in mind, Formidable brings various resources to help you validate all data in your forms and ensure data consistency in your application.

1 - Create a new project

Create a new project named FormidableDemo with Tests enabled.

2 - Project structure

Create the following folders:

Views
Models
Extensions
Enums

3 - Setup SignUpFormView

Create a folder called SignUp inside of Views.
Rename ContentView to SignUpFormView.
Move SignUpFormView to inside of SignUp folder.
In RegisterApp.swift, change ContentView to SignUpFormView.

4 - Adding Formidable to the project

Go to File > Add Package Dependencies.
Input https://github.com/didisouzacosta/Formidable in the search bar.
Touch in Add Package.
In the App Target, select FormidableDemo.

5 - Creating the SignUpForm

Create a new empty file called SignUpForm inside of Views > SignUp.
Import the Foundation and Formidable frameworks.
Create a final class called SignUpForm, it needs to the extend te Formidable protocol.
Add the fields and the initializer:

import Foundation
import Formidable

@Observable
final class SignUpForm: Formidable {

    // MARK: - Public Variables

    var nameField: FormField<String>
    var emailField: FormField<String>
    var passwordField: FormField<String>
    var birthField: FormField<Date>
    var languageField: FormField<String>
    var agreeTermsField: FormField<Bool>

    // MARK: - Initializer

    init() {
        self.nameField = .init("")
        self.emailField = .init("")
        self.passwordField = .init("")
        self.birthField = .init(.now)
        self.languageField = .init("")
        self.agreeTermsField = .init(false)
    }

}

6 - Creating validation errors

Inside of Enums folder, create a new file called ValidationErrors with the following code:

import Foundation

enum ValidationError: LocalizedError {
    case isRequired
    case validEmail
    case alreadyExists
    case toBeLegalAge
    case minLengthPassword
    case agreeTerms

    var errorDescription: String? {
        switch self {
        case .isRequired: "This field cannot be left empty."
        case .validEmail: "Please enter a valid email address."
        case .alreadyExists: "This entry already exists."
        case .toBeLegalAge: "You need to be of legal age."
        case .minLengthPassword: "Password must be at least 3 characters long."
        case .agreeTerms: "You must accept the terms."
        }
    }
}

7 - Applying rules

In SignUpForm, create a new private method called setupRules, and call it in the initializer.
Apply the following rules:

import Foundation
import Formidable

@Observable
final class SignUpForm: Formidable {

    ...

    init() {
        ...
        setupRules()
    }

    // MARK: - Private Methods

    private func setupRules() {
nameField.rules = [
            RequiredRule(ValidationError.isRequired)
        ]

        emailField.rules = [
            EmailRule(ValidationError.validEmail),
            RequiredRule(ValidationError.isRequired)
        ]

        passwordField.rules = [
            RequiredRule(ValidationError.isRequired),
            MinLengthRule(3, error: ValidationError.minLengthPassword)
        ]

        languageField.rules = [
            RequiredRule(ValidationError.isRequired),
        ]

        agreeTermsField.rules = [
            RequiredRule(ValidationError.agreeTerms)
        ]
    }

}

8 - Validate birth field

In the Extensions folder, create an empty file called Date+Extension and add the code bellow:

import Foundation

extension Date {

    func remove(years: Int, calendar: Calendar = .current) -> Date {
        calendar.date(byAdding: .year, value: -years, to: self)!
    }

    func zeroSeconds(_ calendar: Calendar = .current) -> Date {
        let dateComponents = calendar.dateComponents(
            [.year, .month, .day, .hour, .minute],
            from: self
        )
        return calendar.date(from: dateComponents)!
    }

}

Now, back to the file SignUpForm and add the validation for birthField:

...

init(_ user: User) {
...

self.birthField = .init(.now, transform: { $0.zeroSeconds() })

...
}

...

private func setupRules() {
    ...

    birthField.rules = [
        LessThanOrEqualRule(Date.now.remove(years: 18).zeroSeconds(), error: ValidationError.toBeLegalAge)
    ]

    ...
}

...

9 - Improving the languageField

Currently the language field type is String, therefore him accept anything text, but we need limit it in none, portuguese, english and spanish. For it, we will can use an enum, so create an empty file in Enum folder called Language and add the code below:

enum Language: String, CaseIterable {
    case none, portuguese, english, spanish
}

extension Language {

    var detail: String {
        rawValue.capitalized
    }

}

Originally enums can't accepted in the form fields, but we can implement the protocol Emptable for it to be compatible with the rule RequiredRule and to be accepted for the form field.

import Formidable

enum Language: String, CaseIterable {
    case none, portuguese, english, spanish
}

extension Language {

    var detail: String {
        rawValue.capitalized
    }

}

extension Language: Emptable {

    var isEmpty: Bool {
        switch self {
        case .none: true
        default: false
        }
    }

}

Now, go to update the SignUpForm:

...

var languageField: FormField<Language>

...

init() {
...

self.languageField = .init(.none)

...
}

10 - Validating form

Now, we will improve the SignUpForm by adding the submit method, this method will validate the form, if successful, it will return a user object, otherwise will throw the form error.

The Formidable form by default already contains a method called validation that analyzes all the fields and return a error if it exists, so we will take a advantage of this.

Inside of Models folder, create a file named User and add the code below:

import Foundation

struct User {

    let name: String
    let email: String
    let password: String
    let birthday: Date
    let language: Language

    init(
        _ name: String,
        email: String,
        password: String,
        birthday: Date,
        language: Language
    ) {
        self.name = name
        self.email = email
        self.password = password
        self.birthday = birthday
        self.language = language
    }

}

Now, go back to SignUpForm and add this method:

...

// MARK: - Public Methods

func submit() throws -> User {
     try validate()

     return .init(
         nameField.value,
         email: emailField.value,
         password: passwordField.value,
         birthday: birthField.value,
         language: languageField.value
     )
}

...

11 - Testing form

Now, create a file called SignUpFormTests inside of the tests folder, and add the code below:

import Testing
import Foundation

@testable import Example

struct SignUpFormTests {

    @Test func nameFieldMustBeRequired() async throws {
        let form = SignUpForm()

        form.nameField.value = ""

        #expect(form.nameField.isValid == false)

        form.nameField.value = "Orlando"

        #expect(form.nameField.isValid)
    }

    @Test func emailFieldMustContainAValidEmail() async throws {
        let form = SignUpForm()

        form.emailField.value = "invalid_email"

        #expect(form.emailField.isValid == false)

        form.emailField.value = "orlando@gmail.com"

        #expect(form.emailField.isValid)
    }

    @Test func passwordFieldMustBeRequired() async throws {
        let form = SignUpForm()

        form.passwordField.value = ""

        let requiredDescription = ValidationError.isRequired.errorDescription

        #expect(form.passwordField.errors.contains(where: { $0.localizedDescription == requiredDescription }))
        #expect(form.passwordField.isValid == false)

        form.passwordField.value = "123"

        #expect(form.passwordField.isValid)
    }

    @Test func passwordFieldMustContainAtLeastTreeCharacters() async throws {
        let form = SignUpForm()

        form.passwordField.value = "12"

        let minLengthPasswordDescription = ValidationError.minLengthPassword.errorDescription

        #expect(form.passwordField.errors.contains(where: { $0.localizedDescription == minLengthPasswordDescription }))
        #expect(form.passwordField.isValid == false)

        form.passwordField.value = "123"

        #expect(form.passwordField.isValid)
        #expect(form.passwordField.errors.count == 0)
    }

    @Test func languageFieldMustBeRequired() async throws {
        let form = SignUpForm()

        form.languageField.value = .none

        #expect(form.languageField.isValid == false)

        form.languageField.value = .english

        #expect(form.languageField.isValid)
    }

    @Test func birthFieldShouldNotBeLessThan18Years() async throws {
        let form = SignUpForm()

        form.birthField.value = Date.now.remove(years: 17)

        #expect(form.birthField.isValid == false)

        form.birthField.value = Date.now.remove(years: 18)

        #expect(form.birthField.isValid)
    }

    @Test func agreeTermsFieldMustBeRequired() async throws {
        let form = SignUpForm()

        form.agreeTermsField.value = false

        #expect(form.agreeTermsField.isValid == false)

        form.agreeTermsField.value = true

        #expect(form.agreeTermsField.isValid)
    }

    @Test func formShouldThrowAnErrorWhenAnyFieldIsInvalid() throws {
        let form = SignUpForm()

        #expect(throws: ValidationError.isRequired) {
            try form.submit()
        }
    }

    @Test func formMustReturnUserWhenItsValid() throws {
        let form = SignUpForm()
        form.nameField.value = "Adriano"
        form.emailField.value = "adriano@gmail.com"
        form.passwordField.value = "123"
        form.languageField.value = .portuguese
        form.agreeTermsField.value = true

        let user = try form.submit()

        #expect(user.name == "Adriano")
        #expect(user.email == "adriano@gmail.com")
        #expect(user.password == "123")
        #expect(user.birthday == Date.now.remove(years: 18).zeroSeconds())
        #expect(user.language == .portuguese)
    }

}

12 - Creating the SignUpFormView

Finally, with the form tested, we can forward the the form view, then within Views > SignUp update the SignUpFormView with the code below:

import SwiftUI
import Formidable

struct SignUpFormView: View {

    @State private var form = SignUpForm()

    var body: some View {
        NavigationStack {
            Form {
                Section {
                    TextField(
                        "Name",
                        text: $form.nameField.value
                    )
                    .field($form.nameField)

                    TextField(
                        "E-mail",
                        text: $form.emailField.value
                    )
                    .textInputAutocapitalization(.never)
                    .keyboardType(.emailAddress)
                    .field($form.emailField)

                    SecureField(
                        "Password",
                        text: $form.passwordField.value
                    )
                    .field($form.passwordField)
                }

                Section {
                    DatePicker(
                        "Birth",
                        selection: $form.birthField.value,
                        displayedComponents: .date
                    )
                    .field($form.birthField)

                    Picker(
                        "Language",
                        selection: $form.languageField.value
                    ) {
                        ForEach(Language.allCases, id: \.self) { language in
                            Text(language.detail)
                        }
                    }
                    .field($form.languageField)
                }

                Section {
                    Toggle("Terms", isOn: $form.agreeTermsField.value)
                        .field($form.agreeTermsField)
                }
            }
            .navigationTitle("SignUp")
            .toolbar {
                ToolbarItemGroup() {
                    Button(action: reset) {
                        Text("Reset")
                    }
                    .disabled(form.isDisabled)

                    Button(action: save) {
                        Text("Save")
                    }
                }
            }
            .onAppear {
                UITextField.appearance().clearButtonMode = .whileEditing
            }
        }
    }

    // MARK: - Private Methods

    private func reset() {
        form.reset()
    }

    private func save() {
        do {
            let user = try form.submit()
            print(user)
        } catch {}
    }

}

#Preview {
    SignUpFormView()
}

Done! We have a complete form with all the business rules and fully tested.

13 - Bonus

Make a folder called Components, inside of Components create a file called RequirementsView and add the code below:

import SwiftUI

struct RequirementsView: View {

    // MARK: - Private Properties

    private let nameIsValid: Bool
    private let emailIsValid: Bool
    private let passwordIsValid: Bool
    private let birthIsValid: Bool
    private let languageIsValid: Bool
    private let agreeTerms: Bool

    private var requirements: [(label: String, status: Bool)] {
        [
            (label: "Valid name.", status: nameIsValid),
            (label: "Valid e-mail.", status: emailIsValid),
            (label: "Valid password.", status: passwordIsValid),
            (label: "To be legal age.", status: birthIsValid),
            (label: "Select a language.", status: languageIsValid),
            (label: "Agree terms.", status: agreeTerms)
        ]
    }

    // MARK: - Public Properties

    var body: some View {
        VStack(alignment: .leading) {
            ForEach(requirements, id: \.label) { requirement in
                HStack {
                    ZStack {
                        Circle()
                            .stroke(lineWidth: 2)
                            .fill(requirement.status ? .green : .gray)
                            .frame(width: 8, height: 8)
                        Circle()
                            .fill(requirement.status ? .green : .clear)
                            .frame(width: 8, height: 8)
                    }
                    Text(requirement.label)
                        .strikethrough(requirement.status)
                }
            }
        }
    }

    // MARK: - Initializers

    init(
        nameIsValid: Bool,
        emailIsValid: Bool,
        passwordIsValid: Bool,
        birthIsValid: Bool,
        languageIsValid: Bool,
        agreeTerms: Bool
    ) {
        self.nameIsValid = nameIsValid
        self.emailIsValid = emailIsValid
        self.passwordIsValid = passwordIsValid
        self.birthIsValid = birthIsValid
        self.languageIsValid = languageIsValid
        self.agreeTerms = agreeTerms
    }

}

#Preview {
    RequirementsView(
        nameIsValid: true,
        emailIsValid: false,
        passwordIsValid: false,
        birthIsValid: false,
        languageIsValid: false,
        agreeTerms: false
    )
}

Now, update the SignUpFormView adding the RequirementsView with a child of terms section.

...

Section {
     Toggle("Terms", isOn: $form.agreeTermsField.value)
            .field($form.agreeTermsField)
} footer: {
     RequirementsView(
          nameIsValid: form.nameField.isValid,
          emailIsValid: form.emailField.isValid,
          passwordIsValid: form.passwordField.isValid,
          birthIsValid: form.birthField.isValid,
          languageIsValid: form.languageField.isValid,
          agreeTerms: form.agreeTermsField.isValid
     )
     .padding(.top, 4)
}

...

14 - Complete code

You can view and download this project at https://github.com/didisouzacosta/Formidable.

If you like, give it a star!

5 canais no youtube para você se desenvolver mais em React Native

Adriano Souza Costa — Mon, 11 Jan 2021 17:01:19 +0000

Em nosso dia-a-dia em programação e louvável quando conseguimos criar todo o algoritmo de primeira, lembrando e aplicando todos os paradigmas da linguagem na ocasião. Mas normalmente até atingirmos esse ponto de maturidade precisamos passar por um longo caminho de descobertas, com isso, vejo que hoje a maior qualidade dos programadores mais experientes, além da execução, e uma ótima orientação de análise e pesquisa, isso fica cada vez mais claro ao longo do tempo onde vamos percebendo que a maior parcela do nosso trabalho se baseia em análise e pesquisa, com isso tendo boas referências, conseguimos otimizar muito nossas entregas.

Segue uma lista das referências que mais consumi no ano de 2019/2020 quando o assunto era React Native.

1. React Native School

2. Catalin Miron

3. Willian Candillon

4. Guilherme Rodz

5. Geek Dev

Faixa Bônus

Abri essa faixa bônus para destacar as principais referências que tive quando precisei me aprofundar no quesito estrutura de dados e boas práticas:

1. Mango

2. Willian Justen

3. Rocket Seat

**Se puder, dê aquela moral =)**

Já posso usar meu Mac Sillicon M1 no dia-a-dia de trabalho como programador?

Adriano Souza Costa — Mon, 21 Dec 2020 19:37:54 +0000

SIM!!! E digo isso com muita emoção, pois o principal motivo deu ter adquirido um novo computador da Apple em um curto período de tempo após seu lançamento foi na esperança e expectativa que minha produtividade que até então estava sendo prejudicada pelo desempenho do Xcode iria melhorar, e de fato isso aconteceu, a promessa apresentada pela Apple de uma performance melhor para o Xcode realmente aconteceu, e isso encheu meu coração de alegria \o/

Atualmente trabalho com o desenvolvedor iOS na empresa Consulta Remédios e o Xcode é minha principal ferramenta de trabalho, no entanto minha maior frustração era não conseguir fazer uma simples call utilizando o Slack ou Google Meeting com o Xcode e qualquer outro programa executando junto sem que houvesse o estouro da memória e travamento do sistema.

Atualmente o único problema que tive foi relacionado a arquitetura, pois até esse momento (18/12/2020) a lib do Firebase tem alguns problemas para ser compilado para rodar em um simulador, afirmando que não é compatível com usando a arquitetura x86_64-apple-ios-simulator, orientando assim atualizar utilizar uma branch especial para cada ferramenta utilizada, por exemplo, para o Analytics devemos alterar em nosso podfile de pod 'Firebase/Analytics' para pod 'Firebase/Analytics', '7.2-M1' e assim para todos os outros frameworks, ou seja, usar o 7.2-M1

https://github.com/firebase/firebase-ios-sdk/blob/master/AppleSilicon.md

Particularmente não segui por esse caminho, apesar de ter funcionado localmente, pois acredito que os CI`s nesse momento ainda estão se atualizando a essa nova infraestrutura além de que, por agora sou o único que tem um Sillicon M1 e essa mudança pode exigir uma mudança no setup dos outros integrantes, e essa não é a solução, ela deve ser feita de forma transparente, por isso a solução mais adequada foi utilizar o Xcode emulado através do Rosetta, que apesar de perder um pouco de performance, não exigiu nenhum tipo de mudança a ainda assim provou que o novo processador da Apple é realmente poderoso.

O processo para executar o Xcode emulado no Rosetta e simples, basta ir em Aplicações > Botão direito no Xcode > Obter informações > Abrir com Rosetta.

Isso vale para qualquer aplicativo, apesar de perder um pouco de desempenho pode ser muito útil em algumas situações.

Agora para quem trabalho com Android no MacOS a história e outra, até o momento somente no device real.

Uma solução temporária e fazer uma instalação específica de um simulador que pode ser baixado em https://github.com/741g/android-emulator-m1-preview/releases/tag/0.1

**Se puder, dê aquela moral =)**

Links interessantes:

Apple Sillicon M1 — Dessa vez a Apple me surpreendeu!

Adriano Souza Costa — Mon, 21 Dec 2020 19:25:32 +0000

A Apple hoje tem papel fundamental em minha vida, pois hoje minha profissão é exclusivamente para criação de aplicações para tecnologia Apple, e seguir por esse caminho, foi uma escolha que tive que fazer a muito tempo atrás quando decidi iniciar na carreira de programador especializando em desenvolvimento para dispositivos móveis.

No início tive a oportunidade de trabalhar em um projeto para Android utilizando Java e em seguida, fazer o mesmo projeto para iOS utilizando Objective C, e na época fiquei impressionado com a fluidez e design das aplicações iOS e não tive dúvida, decidi seguir com objetivo de me especializar no ecossistema Apple.

No início o amor pelo hardware e software que a Apple oferecia era incondicional, ainda mais porque estava vindo da área do design, e usar o photoshop no Mac era o auge para qualquer design, não tando pelo status, mas sim pois realmente era muito mais fluido. Mas com o passar dos anos esse amor que se parecia eterno, foi esfriando, pois cada vez mais, principalmente depois do lançamento da linguagem Swift, que apesar de ser incrível (a melhor para mim), o Xcode que é minha ferramenta do dia-a-dia não acompanhou e ao longo do tempo chegou ao ponto de dificultar o desenvolvimento de projetos, chegando me fazer a ter interesse em mudar de tecnologia, passando a usar React Native ou Flutter, buscando ter interação com o Xcode somente em momentos pontuais. Além disso, o custo para CI especializados para iOS normalmente tem o valor alto pela alta taxa de processamento que os builds exigem. Isso resultou em uma reanálise do mercado quanto ao desenvolvimento nativo para iOS dando muito espaço para ferramentas híbridas, que trouxeram soluções incríveis relacionadas a performance e produtividade, termos que hoje não se encaixam com a ferramenta Xcode.

Faz muito tempo que estou desacreditado do Xcode, e realmente não via mais soluções para a situação atual, chegando me angustiar com a Apple por ignorar isso, mas a pouco menos de uma semana, tive a oportunidade de adquirir um novo Mac Mini com processador M1, e depois de muitos testes posso dizer que meu coração se encheu de alegria e esperança, pois os longos builds tiveram seu tempo drasticamente reduzido assim como o intellisense e autocompletion que praticamente não funcionava, e que agora estão funcionando perfeitamente, e em um projeto já existe sendo de grande porte. Apesar de não me sentir confortável com a solução para esses problemas ser comprar um computador novo, ainda assim vejo uma luz no fim do túnel que antes não existia, me animando novamente para o desenvolvimento nativo.

Hoje tarefas como fazer uma call, que antes eram impossíveis pois exigiam toda a memória e processamento, hoje parecem não ser nada para a nova arquitetura do Apple Sillicon.

Nesses últimos dias instalei e joguei novamente um game que gosto muito, Tomb Raider que em um Macbook Pro anterior que tive, com processador 17, 16gb de Ram, ssd, 1gb de placa de vídeo ano 2011 não rodava em sua configuração máxima, mas isso no Mac com M1, fluiu perfeitamente não exigindo nada da máquina.

Finalizando, estou muito feliz com o avanço da tecnologia traga pela Apple, pois isso me faz acreditar que em pouquíssimo tempo o prazer e produtividade que existia em usar um Mac irá voltar.

**Se puder, dê aquela moral =)**

Links interessantes:

Ponto Zero

Adriano Souza Costa — Mon, 21 Dec 2020 19:02:54 +0000

Por muito tempo a ideia de compartilhar pequenas pílulas do dia-a-dia como programador iOS está em minha cabeça, mas somente agora decidi me organizar para dedicar a registrar e compartilhar parte do que tanto amo fazer, que é programar.

Atualmente trabalho como programador mobile, especificamente com tecnologia Apple focado na área da saúde/ecommerce, mas até chegar ao dia desse artigo, já caminhei algumas milhas superando muitas dificuldades e conhecendo muita gente boa. Graças a Deus tenho o privilégio de trabalhar com o que gosto e com o que me imagino bem velhinho fazendo.

Sendo o “ponto zero”, o início dessa conversa, gostaria de compartilhar o agente responsável pela saída da inércia, que é a vontade de contribuir e tornar cada vez mais acessível a programação para todos, pois a programação mudou e continua mudando a minha vida, hoje é meu principal meio de renda/vida e através dela e pretendo ser também um agente de mudança.

Links interessantes

Começando no desenvolvimento mobile com React Native: https://reactnative.dev/docs/next/getting-started
Guideline iOS: https://developer.apple.com/design/human-interface-guidelines
Guideline Android: https://material.io/design/guidelines-overview
Principais perguntas na hora da entrevista para uma oportunidade mobile: https://ascendle.com/ideas/7-interview-questions-to-hire-a-great-mobile-app-developer

Comece a seguir, somente se você quiser:

React Brasil: https://medium.com/reactbrasil
Usemobile: https://medium.com/usemobile