Implementing Text Input, Forms, and Input Validation in iOS

Course: iOS App Development Training

Topic: Implementing Text Input, Forms, and Input Validation

Course Link: iOS App Development Training at JustAcademy

Demo Link: Register for a Course Demo

Website: JustAcademy Official Website

1. Introduction to Text Input and Forms in iOS

Text input and forms are essential components of interactive iOS applications. They allow users to enter information such as names, email addresses, passwords, phone numbers, search queries, feedback, and registration details. Forms collect related information in an organized structure, while input validation checks whether the entered data meets the application's requirements.

In SwiftUI, developers can create input interfaces using controls such as TextField, SecureField, and TextEditor. The Form container helps organize fields, toggles, pickers, and other controls into structured sections. In UIKit, similar functionality is commonly implemented using UITextField, UITextView, and Auto Layout.

A well-designed form should make data entry straightforward, explain what information is expected, display helpful validation messages, and prevent invalid data from being submitted accidentally.

Learning objectives

• Understand text input controls available in SwiftUI.
• Create forms with labels, placeholders, sections, and buttons.
• Manage entered values using state and data bindings.
• Configure keyboard types, capitalization, and text content types.
• Validate required fields, email addresses, passwords, and phone numbers.
• Display clear error messages and success feedback.
• Manage keyboard focus and improve the data-entry experience.
• Build a complete registration form using SwiftUI.
• Understand security, accessibility, and form-testing practices.

2. Understanding SwiftUI Text Input Controls

2.1 TextField

TextField is used to collect short text values, such as a username, email address, city, or search term. When connected to a string binding, it updates the bound value as the user edits the field.

import SwiftUI

struct NameInputView: View {
    @State private var fullName = ""

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Enter Your Name")
                .font(.headline)

            TextField("Full name", text: $fullName)
                .textFieldStyle(.roundedBorder)

            Text("Entered name: \(fullName)")
                .font(.subheadline)
        }
        .padding()
    }
}

In this example, @State stores the entered name. The expression $fullName creates a binding that allows the text field to read and update the state value.

2.2 SecureField

SecureField is designed for sensitive text, particularly passwords. It conceals the entered characters instead of displaying the value as ordinary text.

struct PasswordInputView: View {
    @State private var password = ""

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Password")
                .font(.headline)

            SecureField("Enter password", text: $password)
                .textFieldStyle(.roundedBorder)
        }
        .padding()
    }
}

Use a secure input control whenever the user enters a password. Avoid printing passwords to the console or displaying them in debugging messages.

2.3 TextEditor

TextEditor is intended for longer, multiline text, such as feedback, comments, descriptions, and support requests.

struct FeedbackInputView: View {
    @State private var feedback = ""

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            Text("Share Your Feedback")
                .font(.headline)

            TextEditor(text: $feedback)
                .frame(minHeight: 140)
                .overlay {
                    RoundedRectangle(cornerRadius: 8)
                        .stroke(.gray.opacity(0.4))
                }

            Text("Characters: \(feedback.count)")
                .font(.caption)
                .foregroundStyle(.secondary)
        }
        .padding()
    }
}

Unlike a standard short text field, a text editor supports multiline entry. If a placeholder is needed, it can be implemented as a separate view layered behind the editor while the text is empty.

2.4 Choosing the appropriate control

3. Managing Input with @State and Bindings

SwiftUI views are declarative: the interface reflects the current state of the application. When the user types into a text field, the bound state changes and SwiftUI updates the relevant views.

@State is appropriate for simple, view-owned input values. The dollar-sign syntax, such as $email, provides a binding that connects a control to the stored value.

struct ContactFormView: View {
    @State private var name = ""
    @State private var email = ""
    @State private var message = ""

    var body: some View {
        VStack(spacing: 16) {
            TextField("Full name", text: $name)
            TextField("Email address", text: $email)

            TextEditor(text: $message)
                .frame(height: 120)

            Text("Name: \(name)")
            Text("Email: \(email)")
        }
        .textFieldStyle(.roundedBorder)
        .padding()
    }
}

As the user edits each control, the corresponding property stores the latest value. This makes it possible to validate the form, enable or disable submission, and prepare a request to a backend service.

When to use an observable model

For a larger application, a dedicated observable model can hold form state and validation logic. This separates the user interface from business rules and makes the code easier to maintain. For a small form, several @State properties may be sufficient.

4. Creating a Structured Form with Form and Section

The SwiftUI Form container organizes input controls into a form-oriented interface. A Section groups related fields and can include a header and footer. The system applies platform-appropriate form styling.

struct ProfileFormView: View {
    @State private var fullName = ""
    @State private var email = ""
    @State private var city = ""

    var body: some View {
        NavigationStack {
            Form {
                Section("Personal Information") {
                    TextField("Full name", text: $fullName)
                    TextField("Email address", text: $email)
                        .keyboardType(.emailAddress)
                        .textInputAutocapitalization(.never)
                        .autocorrectionDisabled()
                }

                Section("Location") {
                    TextField("City", text: $city)
                }

                Section {
                    Button("Save Profile") {
                        print("Save requested")
                    }
                }
            }
            .navigationTitle("Edit Profile")
        }
    }
}

This structure separates personal information from location details and places the save action in its own section. In a production application, the save action should validate the data before updating a profile or sending a network request.

Benefits of using Form

• Provides a familiar structure for settings and data-entry screens.
• Groups related controls into meaningful sections.
• Supports common form controls such as text fields, toggles, and pickers.
• Works with standard SwiftUI navigation and scrolling.
• Reduces the need to manually construct every row and separator.

5. Labels, Placeholders, and Input Instructions

A label communicates what information a field requires. A placeholder gives an example or hint, but it disappears when the user enters text. For this reason, important field descriptions should not depend on placeholders alone.

Form {
    Section("Account Details") {
        TextField(
            "Email address",
            text: $email,
            prompt: Text("[email protected]")
        )
        .keyboardType(.emailAddress)
        .textInputAutocapitalization(.never)
        .autocorrectionDisabled()
    }
}

For custom layouts, use a visible label above the input when it improves clarity. Explain formatting requirements before the user submits the form instead of relying on an error message alone.

Good input guidance

• Use specific labels such as "Email address" instead of "Enter value".
• Provide realistic examples when formatting may be unclear.
• Identify required fields clearly.
• Explain password requirements before submission.
• Use error messages that tell users how to correct a value.
• Do not use color as the only indication of an error.

6. Configuring the Keyboard for Each Field

Choosing an appropriate keyboard helps users enter information accurately and quickly. SwiftUI provides modifiers for keyboard type, capitalization, autocorrection, and semantic content type.

TextField("Email address", text: $email)
    .keyboardType(.emailAddress)
    .textContentType(.emailAddress)
    .textInputAutocapitalization(.never)
    .autocorrectionDisabled()

TextField("Phone number", text: $phone)
    .keyboardType(.phonePad)
    .textContentType(.telephoneNumber)

Keyboard types are input aids, not validation rules. Users may still paste unexpected characters or enter data using external keyboards, so the application must validate the actual value.

7. Understanding Input Validation

Input validation checks whether data meets the application's rules before it is accepted or submitted. It prevents incomplete, malformed, or unacceptable values from moving into later processing stages.

Common validation categories

• Required-field validation: Checks whether mandatory information has been supplied.
• Length validation: Checks minimum or maximum character counts.
• Format validation: Checks whether the value follows an expected structure.
• Range validation: Ensures numeric values fall within an allowed range.
• Cross-field validation: Compares multiple fields, such as password and confirmation.
• Business-rule validation: Applies application-specific rules.
• Server-side validation: Confirms that submitted data satisfies backend rules and security requirements.

Validation should be helpful rather than punitive. The application should explain the problem, preserve the user's entered information when possible, and provide a clear path to correcting it.

8. Validating Required Fields

A required field should not be considered valid if it contains only spaces or newline characters. Use trimming when checking whether a value is empty.

func isRequiredFieldValid(_ value: String) -> Bool {
    !value.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty
}

Example usage:

let name = "   "

if isRequiredFieldValid(name) {
    print("Name is valid")
} else {
    print("Please enter your name")
}

Because the sample name contains only whitespace, the validation returns false. Trimming should be used thoughtfully: for example, a password should not automatically be trimmed unless that behavior is part of the application's explicit password policy.

9. Validating Email Addresses

Email validation checks whether an entered value resembles an acceptable email address. A simple check can catch common mistakes, but a regular expression or a local check cannot prove that an address exists or belongs to the user.

A practical basic validation function

func isValidEmail(_ email: String) -> Bool {
    let trimmedEmail = email.trimmingCharacters(
        in: .whitespacesAndNewlines
    )

    guard !trimmedEmail.isEmpty else {
        return false
    }

    let pattern = #"^[A-Z0-9a-z.!#$%&'*+/=?^_`{|}~-]+@[A-Z0-9a-z-]+(?:\.[A-Z0-9a-z-]+)+$"#

    return trimmedEmail.range(
        of: pattern,
        options: .regularExpression
    ) != nil
}

This is a practical introductory check for common email formats, not a complete implementation of every valid email-address standard. For account verification, send a confirmation link or code and verify the address through the backend.

Testing sample email values

10. Password Validation and Confirmation

Password rules depend on the application's security policy. A registration form may require a minimum length and ask the user to confirm the password. Avoid unnecessarily restrictive rules that force arbitrary combinations of character types unless there is a specific security requirement.

func isValidPassword(_ password: String) -> Bool {
    password.count >= 8
}

func passwordsMatch(
    password: String,
    confirmation: String
) -> Bool {
    !password.isEmpty && password == confirmation
}

The first function checks a simple minimum length. The second checks whether both password fields contain the same non-empty value. These are introductory examples; production systems should define their password policy according to the application's security needs.

Password input fields

SecureField("Create password", text: $password)
    .textContentType(.newPassword)

SecureField("Confirm password", text: $confirmPassword)
    .textContentType(.newPassword)

Never store plaintext passwords in application logs or ordinary preferences. Authentication systems should send credentials only through secure transport and use a properly designed backend authentication process.

11. Validating Phone Numbers

Phone-number validation is more complicated than checking whether a string contains a certain number of digits. Different countries use different numbering plans, prefixes, and lengths. Users may also enter spaces, parentheses, or hyphens.

A simple introductory validator can normalize common separators and check a basic digit-count range. It should not be treated as proof that a phone number is assigned or reachable.

func hasPlausiblePhoneLength(_ phone: String) -> Bool {
    let digits = phone.filter { $0.isNumber }
    return (7...15).contains(digits.count)
}

This example accepts a broad digit-count range for demonstration. A production application should use a suitable phone-number parsing and validation approach that accounts for the selected country and the expected format.

12. Displaying Validation Errors in SwiftUI

Validation results should be communicated close to the relevant field. A message such as "Please enter a valid email address" is more useful than a generic "Invalid input" message.

struct EmailValidationView: View {
    @State private var email = ""
    @State private var showValidation = false

    private var emailIsValid: Bool {
        isValidEmail(email)
    }

    var body: some View {
        Form {
            Section("Account") {
                TextField("Email address", text: $email)
                    .keyboardType(.emailAddress)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()

                if showValidation && !emailIsValid {
                    Text("Enter a valid email address.")
                        .font(.footnote)
                        .foregroundStyle(.red)
                }

                Button("Continue") {
                    showValidation = true

                    if emailIsValid {
                        print("Email passed local validation")
                    }
                }
            }
        }
    }
}

This example displays the error after the user taps Continue. The error can update as the user corrects the value. For better feedback, a real form may track whether a field has been touched or submitted, so it does not display unnecessary errors before the user has had an opportunity to enter information.

13. Enabling and Disabling the Submit Button

One way to prevent incomplete submissions is to disable the submit button until the form meets the minimum requirements. The validation condition should be derived from the current input values so that the interface updates automatically.

struct SimpleAccountForm: View {
    @State private var name = ""
    @State private var email = ""

    private var formIsValid: Bool {
        isRequiredFieldValid(name) && isValidEmail(email)
    }

    var body: some View {
        Form {
            Section("Account Details") {
                TextField("Full name", text: $name)

                TextField("Email address", text: $email)
                    .keyboardType(.emailAddress)
                    .textInputAutocapitalization(.never)
                    .autocorrectionDisabled()
            }

            Section {
                Button("Create Account") {
                    guard formIsValid else { return }
                    print("Ready to submit")
                }
                .disabled(!formIsValid)
            }
        }
    }
}

Disabling a button is helpful, but the user should still understand why submission is unavailable. You can add short guidance or inline validation messages. Always validate again in the submission action because the action itself should not assume that a user interface state is sufficient security protection.

14. Building a Complete Registration Form

The following example combines common SwiftUI input controls, validation functions, error messages, and a submission action. It demonstrates local form validation before submission.

import SwiftUI

struct RegistrationFormView: View {
    @State private var fullName = ""
    @State private var email = ""
    @State private var phone = ""
    @State private var password = ""
    @State private var confirmPassword = ""
    @State private var acceptedTerms = false

    @State private var didAttemptSubmit = false
    @State private var showSuccess = false

    private var nameIsValid: Bool {
        isRequiredFieldValid(fullName)
    }

    private var emailIsValid: Bool {
        isValidEmail(email)
    }

    private var phoneIsValid: Bool {
        hasPlausiblePhoneLength(phone)
    }

    private var passwordIsValid: Bool {
        isValidPassword(password)
    }

    private var confirmationIsValid: Bool {
        passwordsMatch(
            password: password,
            confirmation: confirmPassword
        )
    }

    private var formIsValid: Bool {
        nameIsValid &&
        emailIsValid &&
        phoneIsValid &&
        passwordIsValid &&
        confirmationIsValid &&
        acceptedTerms
    }

    var body: some View {
        NavigationStack {
            Form {
                Section("Personal Information") {
                    TextField("Full name", text: $fullName)
                        .textContentType(.name)
                        .textInputAutocapitalization(.words)

                    if didAttemptSubmit && !nameIsValid {
                        errorMessage("Please enter your full name.")
                    }

                    TextField("Email address", text: $email)
                        .keyboardType(.emailAddress)
                        .textContentType(.emailAddress)
                        .textInputAutocapitalization(.never)
                        .autocorrectionDisabled()

                    if didAttemptSubmit && !emailIsValid {
                        errorMessage("Enter a valid email address.")
                    }

                    TextField("Phone number", text: $phone)
                        .keyboardType(.phonePad)
                        .textContentType(.telephoneNumber)

                    if didAttemptSubmit && !phoneIsValid {
                        errorMessage("Enter a valid phone number.")
                    }
                }

                Section("Security") {
                    SecureField("Create password", text: $password)
                        .textContentType(.newPassword)

                    if didAttemptSubmit && !passwordIsValid {
                        errorMessage(
                            "Use a password with at least 8 characters."
                        )
                    }

                    SecureField(
                        "Confirm password",
                        text: $confirmPassword
                    )
                    .textContentType(.newPassword)

                    if didAttemptSubmit && !confirmationIsValid {
                        errorMessage("Passwords do not match.")
                    }
                }

                Section("Agreement") {
                    Toggle(
                        "I accept the terms and conditions",
                        isOn: $acceptedTerms
                    )

                    if didAttemptSubmit && !acceptedTerms {
                        errorMessage(
                            "Please accept the terms to continue."
                        )
                    }
                }

                Section {
                    Button("Create Account") {
                        didAttemptSubmit = true

                        guard formIsValid else {
                            showSuccess = false
                            return
                        }

                        submitRegistration()
                    }
                    .frame(maxWidth: .infinity)
                }
            }
            .navigationTitle("Registration")
            .alert("Form Validated", isPresented: $showSuccess) {
                Button("OK", role: .cancel) { }
            } message: {
                Text("All fields passed the local validation checks.")
            }
        }
    }

    @ViewBuilder
    private func errorMessage(_ message: String) -> some View {
        Text(message)
            .font(.footnote)
            .foregroundStyle(.red)
    }

    private func submitRegistration() {
        // Send validated data to your registration service.
        // Never log the user's password.
        showSuccess = true
    }
}

Place the validation helper functions from the previous sections in the same file outside the view structure, or put them in a separate validation utility file. This sample demonstrates local checks only. A real registration workflow must handle network errors, server responses, account creation, and secure authentication.

15. Managing Keyboard Focus with @FocusState

Keyboard focus determines which input field is currently active. Using @FocusState allows an application to move focus programmatically, such as moving from an email field to a password field after the user presses Return.

struct FocusExampleView: View {
    enum Field {
        case email
        case password
    }

    @State private var email = ""
    @State private var password = ""
    @FocusState private var focusedField: Field?

    var body: some View {
        Form {
            TextField("Email address", text: $email)
                .keyboardType(.emailAddress)
                .textInputAutocapitalization(.never)
                .focused($focusedField, equals: .email)
                .submitLabel(.next)
                .onSubmit {
                    focusedField = .password
                }

            SecureField("Password", text: $password)
                .focused($focusedField, equals: .password)
                .submitLabel(.done)
                .onSubmit {
                    focusedField = nil
                }
        }
    }
}

The .submitLabel(.next) modifier communicates that the next action is to move to another field. Setting the focus value to nil dismisses focus, which usually dismisses the software keyboard.

Keyboard usability tips

• Use the Next action to move between related fields.
• Use Done or Submit when the current entry task is complete.
• Make sure the active field remains visible when the keyboard appears.
• Provide a way to dismiss the keyboard when appropriate.
• Do not assume every user is using the software keyboard; support hardware keyboards too.

16. Input Sanitization and Safe Data Handling

Validation checks whether data meets defined rules. Sanitization or normalization transforms input into a consistent representation when appropriate. For example, an email address may be trimmed of accidental leading and trailing whitespace before it is validated.

func normalizedEmail(_ email: String) -> String {
    email.trimmingCharacters(in: .whitespacesAndNewlines)
}

Normalization must be specific to the field. Do not remove meaningful characters from names, automatically modify passwords, or assume that every input should be converted to lowercase. Apply transformations only when they preserve the intended meaning of the data.

Security practices

• Validate data on the client for a better user experience.
• Repeat all important validation on the server.
• Use HTTPS for transmitting sensitive form data.
• Never store passwords in plain text or print them in logs.
• Use parameterized database operations on the backend.
• Do not rely on hidden fields, disabled buttons, or client-side checks as security controls.
• Collect only information required for the application's purpose.
• Show safe, understandable errors without exposing internal system details.

17. Accessibility and Form Usability

Forms should be usable by people with different visual, motor, and cognitive needs. Clear labels, understandable messages, sufficient tap targets, and support for Dynamic Type improve the experience for a wide range of users.

• Provide meaningful labels for all input controls.
• Do not communicate errors through color alone; include explanatory text.
• Ensure text remains readable at larger system font sizes.
• Use semantic keyboard types and content types where appropriate.
• Keep related fields together in logical sections.
• Preserve entered values when validation fails.
• Move focus thoughtfully without unexpectedly disrupting the user.
• Use descriptive button titles such as "Create Account" instead of vague labels.
• Make sure error messages are accessible to assistive technologies.

18. Common Form Validation Mistakes

19. Testing Text Input and Validation

Testing should cover valid values, invalid values, empty fields, boundary conditions, keyboard interactions, and submission behavior. Do not test only the successful path.

Manual testing checklist

• Submit the form with every required field empty.
• Enter only spaces in required text fields.
• Test valid and invalid email formats.
• Test passwords that are too short.
• Test matching and non-matching password confirmations.
• Enter phone numbers with spaces, hyphens, and country codes.
• Check that errors disappear or update after corrections.
• Verify that invalid data cannot trigger the submission action.
• Test the keyboard's Next, Done, and Submit actions.
• Test on different iPhone and iPad sizes.
• Increase Dynamic Type and verify that error messages remain readable.
• Test server rejection, offline conditions, and unexpected backend errors.

Example validation test cases

20. Practice Exercises

1. Create a profile form containing full name, email, city, and phone number.
2. Build a password form with password confirmation and a minimum-length check.
3. Add inline error messages to each required field.
4. Disable the submit button until the mandatory fields are valid.
5. Use @FocusState to move between email and password fields.
6. Create a feedback form using TextEditor and a character counter.
7. Build a registration screen with a terms-and-conditions toggle.
8. Test the form with empty, malformed, and valid data.
9. Separate validation helper functions from the SwiftUI view to improve maintainability.
10. Connect the validated form to a mock service and handle success and failure responses.

21. Interview Questions and Answers

Q1. What is the purpose of TextField in SwiftUI?

TextField collects short text input and updates a bound value as the user edits the field.

Q2. What is the difference between TextField and SecureField?

TextField displays ordinary entered text, while SecureField conceals sensitive text such as a password.

Q3. When should you use TextEditor?

Use TextEditor for longer, multiline input such as feedback, descriptions, and comments.

Q4. What is the purpose of the Form container?

Form organizes input controls into a structured, form-oriented interface and can group controls using sections.

Q5. What is input validation?

Input validation checks whether user-provided values meet required format, length, range, and business rules before processing or submission.

Q6. Why is @State used with text fields?

@State stores view-owned values, while a binding such as $email connects the stored value to the text field.

Q7. How can you display a validation error?

Use a conditional view to display a clear message near the field when its validation rule fails.

Q8. Why is client-side validation not enough?

Client-side validation improves usability, but it can be bypassed. The backend must independently validate important data and enforce security rules.

Q9. What is @FocusState used for?

@FocusState tracks and controls input focus, enabling actions such as moving to the next field or dismissing the keyboard.

Q10. How should passwords be handled?

Use secure input controls, avoid logging or storing plaintext passwords, transmit credentials securely, and rely on a properly designed authentication backend.

22. Quick Revision Checklist

• Use TextField for short text, SecureField for passwords, and TextEditor for multiline content.
• Use Form and Section to organize related controls.
• Connect input values with @State and bindings.
• Configure keyboard types and text content types appropriately.
• Validate required fields, formats, lengths, and related field values.
• Show specific and accessible error messages.
• Keep form values when validation fails.
• Use @FocusState to improve keyboard navigation.
• Validate again on the backend before accepting submitted data.
• Test invalid input, boundary cases, accessibility, and network failures.

23. Conclusion

Implementing text input, forms, and input validation is a fundamental skill in iOS application development. SwiftUI provides controls such as TextField, SecureField, and TextEditor, while Form and Section help organize data-entry interfaces. State and bindings keep the interface synchronized with user input, and validation rules help identify incomplete or incorrectly formatted values.

A professional form combines clear labels, appropriate keyboards, accessible error messages, thoughtful focus management, and secure data handling. Client-side checks should make the experience easier, while the server remains responsible for enforcing important validation and security rules.

Official References

• Apple Developer Documentation: TextField
• Apple Developer Documentation: Text Input and Output
• Apple Human Interface Guidelines: Text Fields

Learn more through JustAcademy's iOS App Development Training, register for a course demo, or visit the JustAcademy official website.