【正社員】還元率83%【フリーランス】マージン一律5万円で案件をご紹介させていただきます。 詳細はこちら

【Swift】入力バリデーションのエラーメッセージをUITextFieldDelegateを使って表示する方法を解説!

【Swift】入力バリデーションのエラーメッセージをUITextFieldDelegateを使って表示する方法を解説!
ふくしま

こんにちは!株式会社メモリアインクのふくしまです!

この記事では、UITextFieldDelegateを利用して、エラーメッセージをテキストフィールドの下に表示する方法について解説します。

この記事を読んで分かること…
・UITextFieldDelegateとは?
・テキストフィールドの編集プロセスを監視して制御する方法
・入力フィールドのバリデーションを行う方法

目次

UITextFieldDelegateとは?

UITextFieldDelegateは、UITextField(テキストフィールド)の動作に関するデリゲートメソッドの集まりを提供するプロトコルです。このプロトコルを使用することで、テキストフィールドの編集開始時、編集中、編集終了時など、さまざまなイベントに応じたカスタマイズされた挙動を実装することが可能になります。SwiftにおけるiOSアプリ開発で、ユーザー入力の管理やバリデーションを効果的に行うために広く利用されています。

デリゲートについては、以下の記事で詳しく解説していますので併せてご覧ください!

主なUITextFieldDelegateメソッド

  • textFieldShouldBeginEditing(_:): テキストフィールドが編集を開始する直前に呼ばれるメソッドです。このメソッドでfalseを返すと、編集が開始されません。
  • textFieldDidBeginEditing(_:): テキストフィールドの編集が開始された直後に呼ばれるメソッドです。
  • textFieldShouldEndEditing(_:): テキストフィールドが編集を終了する直前に呼ばれるメソッドです。このメソッドでfalseを返すと、編集モードが終了しません。
  • textFieldDidEndEditing(_:): テキストフィールドの編集が終了した直後に呼ばれるメソッドです。編集終了の理由に応じて、複数のバリエーションがあります(例: textFieldDidEndEditing(_:reason:))。
  • textField(_:shouldChangeCharactersIn:replacementString:): テキストフィールドに入力されたテキストが変更されるたびに呼ばれるメソッドです。このメソッド内で入力されたテキストのバリデーションを行うことができます。
  • textFieldShouldClear(_:): テキストフィールドの内容がクリアされる直前に呼ばれるメソッドです。このメソッドでfalseを返すと、内容のクリアがキャンセルされます。
  • textFieldShouldReturn(_:): キーボードのリターンキーが押されたときに呼ばれるメソッドです。このメソッド内でキーボードを閉じる処理などを行うことが一般的です。

エラーメッセージの表示方法

概要

それでは、テキストフィールドに入力した文字をバリデーションチェックして、エラーがある場合にエラーメッセージを表示する方法をサンプルコードを示しながら解説していきたいと思います。

前提

UserID、PasswordのUITextFieldとエラーメッセージのためのUILabel、ログインボタンのためのUIButtonを用意し、ViewControllerに紐づけておきましょう。

【Swift】入力バリデーションのエラーメッセージをUITextFieldDelegateを使って表示する方法を解説!

サンプルコード

import UIKit

class ViewController: UIViewController, UITextFieldDelegate {
    @IBOutlet weak var userIdTextField: UITextField!
    @IBOutlet weak var passwordTextField: UITextField!
    @IBOutlet weak var userIdErrorLabel: UILabel!
    @IBOutlet weak var passwordErrorLabel: UILabel!
    @IBOutlet weak var actionButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        userIdTextField.delegate = self
        passwordTextField.delegate = self
        userIdErrorLabel.isHidden = true
        passwordErrorLabel.isHidden = true
        
        // エラーメッセージの色を赤に設定
        userIdErrorLabel.textColor = UIColor.red
        passwordErrorLabel.textColor = UIColor.red
      // ボタンの初期表示時の設定
        initialSetupButton()
        // テキストフィールドに変更があった時の処理
        userIdTextField.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
        passwordTextField.addTarget(self, action: #selector(textFieldDidChange(_:)), for: .editingChanged)
    }
    
    func textFieldDidEndEditing(_ textField: UITextField) {
        if textField == userIdTextField {
            validateUserId()
        } else if textField == passwordTextField {
            validatePassword()
        }
    }
    
    func validateUserId() {
        guard let userId = userIdTextField.text, !userId.isEmpty else {
            userIdErrorLabel.text = "ユーザーIDを入力してください。"
            userIdErrorLabel.isHidden = false
            return
        }
        userIdErrorLabel.isHidden = true
    }
    
    func validatePassword() {
        guard let password = passwordTextField.text, password.count >= 8 else {
            passwordErrorLabel.text = "パスワードは8文字以上である必要があります。"
            passwordErrorLabel.isHidden = false
            return
        }
        passwordErrorLabel.isHidden = true
    }
    
    func initialSetupButton() {
        // 初期状態でボタンを非活性にする
        actionButton.isEnabled = false
        // 非活性状態の色:透明度50%
        actionButton.backgroundColor = UIColor.systemOrange.withAlphaComponent(0.5)
    }
    
    func updateButtonState(isEnabled: Bool) {
        actionButton.isEnabled = isEnabled
        // ボタンの背景色を活性状態に応じて更新
        if isEnabled {
            actionButton.backgroundColor = UIColor.systemOrange // 活性状態の色
        } else {
            // 非活性状態の色:透明度50%
            actionButton.backgroundColor = UIColor.systemOrange.withAlphaComponent(0.5)
        }
    }

    @objc func textFieldDidChange(_ sender: UITextField) {
        let isUserIdFilled = !(userIdTextField.text?.isEmpty ?? true)
        let isPasswordFilled = !(passwordTextField.text?.isEmpty ?? true)
        actionButton.isEnabled = isUserIdFilled && isPasswordFilled

        updateButtonState(isEnabled: actionButton.isEnabled)
    }
}

サンプルコードの説明

・3行目:UITextFieldDelegateプロトコルに準拠しており、テキストフィールドのデリゲートメソッドを実装することができます。
・25-31行目:テキストフィールドの編集が終了した時に呼び出されるメソッドです。どのテキストフィールドが編集されたかに応じて、適切なバリデーションメソッド(validateUserIdまたはvalidatePassword)を呼び出します。
・33-40、42-49行目:ユーザーIDとパスワードの入力をバリデーションし、条件を満たさない場合はエラーラベルを表示します。
・53-58、60-69行目:ボタンの初期状態を非活性に設定し、テキストフィールドの入力状態に応じてボタンの活性・非活性を動的に更新します。
・72-77行目:どちらのテキストフィールドにも入力がある場合にのみ、ログインボタンを活性化するロジックを実装しています。このメソッドは、テキストフィールドの内容が変更されるたびに呼び出されます。

ボタンを非活性にする方法については、以下の記事で詳しく解説していますので、併せてご覧ください!

動作確認

ふくしま

それではビルドして動作確認してみましょう!

【Swift】入力バリデーションのエラーメッセージをUITextFieldDelegateを使って表示する方法を解説!

まとめ

いかがでしたか?
本記事では、UITextFieldDelegateを利用してログイン画面における入力バリデーションを行い、エラーメッセージを表示する方法を解説しました。ユーザーからの入力値を適切に検証し、エラーがある場合はその内容を明確に伝えることで、よりユーザーにとって使いやすいアプリケーションとなるでしょう。
この記事が皆様の開発ライフの一助になれると幸いです!

ふくしま

この記事があなたのスキルアップに役立ったなら、次のキャリアステップを踏み出す絶好の機会かもしれません。エンジニアとしてのさらなる成長と挑戦を求めるなら、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

弊社テックブログをご愛読いただきありがとうございます。
当テックブログを運用している株式会社メモリアインクは、
【正社員】還元率83%
【フリーランス】マージン一律5万円で案件のご紹介
と、エンジニアの皆様に分かりやすい形で稼げる仕組みを構築し提供させていただいております。詳しくは弊社お問い合わせページ、プロフィールのQRコードを読み取り、LINEメッセージでお問い合わせいただけますと幸いです。

コメント

コメントする

目次