概要

Swift/SwiftUIで再現したウェブサイトのお問合せフォームに動的なバリデーションを実装していきます。

バリデーション

バリデーションを作成するにあたって、ViewModelを作成して切り分けます。
「File > New > File..」を選択し、「Swift File」を選択して「ContactFormViewModel.swift」を作成します。

下記のように記述します。
PublishedはObservableObjectプロトコルに準拠したクラス内のプロパティを監視するのでクラスに継承させます。

ContactFormViewModel.swift

import Foundation

class ContactFormViewModel:ObservableObject{
    var name = ""
    var email = ""
    var contactBody = ""
}

ContactFormView.swiftでContactFormViewModelから値を取得するように編集します。

ContactFormView.swift

	import SwiftUI

	struct ContactFormView: View {
	    
+	    @ObservedObject var CFVM = ContactFormViewModel()

-	    @State var name = ""
-	    @State var email = ""
-       @State var contactBody = ""

	    var body: some View {
	        VStack{
	            Text("Contact").font(.title)
	                            
	            VStack{
	                Text("お問合わせフォーム").font(.headline).foregroundColor(.white)
	            }
	            .frame(maxWidth:.infinity)
	            .frame(height:100)
	            .background(.blue)
	            
	            VStack{
	                Text("お問合わせ内容を入力してください。").padding()
	                Group{
-	                    TextField("お名前",text:$name)
+	                    TextField("お名前",text:$CFVM.name)
	                        .keyboardType(.default)
	                        .textFieldStyle(RoundedBorderTextFieldStyle())
	                        .frame(maxWidth: .infinity)
	                        
	                    Text("お名前は必須です。")
	                        .multilineTextAlignment(.leading)
	                        .frame(maxWidth:.infinity,alignment: .leading)
	                        .padding(.leading, 10.0)
	                        .foregroundColor(.red)
	                        .font(.caption2)
	                    
	                }.padding(.bottom, 10.0)
	                
	                Group{
-	                    TextField("email",text:$email)
+	                    TextField("email",text:$CFVM.email)
	                        .keyboardType(.emailAddress)
	                        .textInputAutocapitalization(.never)
	                        .textFieldStyle(RoundedBorderTextFieldStyle())
	                        .frame(maxWidth: .infinity)
	                      
	                    Text("emailは必須かつemailの形式で入力してください。")
	                        .multilineTextAlignment(.leading)
	                        .frame(maxWidth:.infinity,alignment: .leading)
	                        .padding(.leading, 10.0)
	                        .foregroundColor(.red)
	                        .font(.caption2)
	                }.padding(.bottom, 10.0)
	                
	                Group{
-	                    TextField("問合わせ内容",text:$contactBody)
+	                    TextField("問合わせ内容",text:$CFVM.contactBody)
	                        .keyboardType(.emailAddress)
	                        .textFieldStyle(RoundedBorderTextFieldStyle())
	                        .frame(maxWidth: .infinity)
	                      
	                    Text("問合せ内容は必須かつ1文字以上10文字以内で入力して下さい。")
	                        .multilineTextAlignment(.leading)
	                        .frame(maxWidth:.infinity,alignment: .leading)
	                        .padding(.leading, 10.0)
	                        .foregroundColor(.red)
	                        .font(.caption2)
	                }.padding(.bottom, 10.0)
	                
	                Button(action:{
	                    
	                }){
	                    Text("送信")
	                        .frame(minWidth: 160)
	                        .foregroundColor(.white)
	                        .padding(12)
	                        .background(Color.accentColor)
	                        .cornerRadius(8)
	                }

	                Spacer()
	                    
	            }.frame(maxWidth:.infinity).frame(height:500)
	                            
	        }
	    }
	}

	struct ContactFormView_Previews: PreviewProvider {
	    static var previews: some View {
	        ContactFormView()
	    }
	}

name必須バリデーション

ContactFormViewModel.swiftに記述していきます。
nameが空ならfalse、それ以外はtrueを返すfunctionを作成します。
nameを監視するためPublished属性をつけます。

ContacFormViewModel.swift

    import Foundation

     class ContactFormViewModel:ObservableObject{
-       var name = ""
+       @Published  var name = ""
        var email = ""
        var contactBody = ""
        
+       //MARK: -Validation Function
+       func isNameValid() -> Bool{
+           return name != ""
+       }
+       
    }

コピペ用

import Foundation

class ContactFormViewModel:ObservableObject{
    @Published  var name = ""
    var email = ""
    var contactBody = ""
    
    //MARK: -Validation Function
    func isNameValid() -> Bool{
        return name != ""
    }
}

次に、isCompleteという変数を設定します。
isCompleteはボタンを制御するのに使います。
作成したisNameValidがfalseだったらisCompleteという変数にfalse、それ以外はtrueを入れるようにします。

ContactFormViewModel.swift

    import Foundation

    class ContactFormViewModel:ObservableObject{
        @Published var name = ""
        var email = ""
        var contactBody = ""
        
        //MARK: -Validation Founction
        func isNameValid() -> Bool{
            return name != ""
        }
        
+       var isComplete:Bool{
+           if !isNameValid() {
+               return false
+           }
+           return true
+       }

    }

コピペ用

var isComplete:Bool{
    if !isNameValid() {
        return false
    }
    return true
}

次に、名前のエラーメッセージを設定します。

ContactFormViewModel.swift

    import Foundation

    class ContactFormViewModel:ObservableObject{
        @Published var name = ""
        var email = ""
        var contactBody = ""
        
        //MARK: -Validation Founction
        func isNameValid() -> Bool{
            return name != ""
        }
        
        var isComplete:Bool{
            if !isNameValid() {
                return false
            }
            return true
        }
        
+       // MARK: - Validation Prompt
+       var namePrompt:String{
+           if isNameValid(){
+               return ""
+           }else{
+               return "お名前は必須です。"
+           }
+       }
    }

コピペ用

// MARK: - Validation Prompt
var namePrompt:String{
    if isNameValid(){
        return ""
    }else{
        return "お名前は必須です。"
    }
}

ContactFormにViewに適用させてみます。
nameのエラーのテキストを変数に変えるのみです。

ContactFormView.swift

    Group{
        TextField("氏名",text:$CFVM.name)
            .keyboardType(.default)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .frame(maxWidth: .infinity)

-       Text("お名前は必須です。")           
+       Text(CFVM.namePrompt)
            .multilineTextAlignment(.leading)
            .frame(maxWidth:.infinity,alignment: .leading)
            .padding(.leading, 10.0)
            .foregroundColor(.red)
            .font(.caption2)
        
    }

また、ボタンをバリデーションエラーの間は押せないようにします。
isCompleteがfalseの間は、opacityを0.5、disabledに設定します。

ContactFormView.swift

    Button(action:{
        
    }){
        Text("送信")
            .frame(minWidth: 160)
            .foregroundColor(.white)
            .padding(12)
            .background(Color.accentColor)
            .cornerRadius(8)
    }
+   .opacity(CFVM.isComplete ? 1 : 0.5)
+   .disabled(!CFVM.isComplete)

コピペ用

.opacity(CFVM.isComplete ? 1 : 0.5)
.disabled(!CFVM.isComplete)

動的挙動を確認すると、氏名が未入力の間はエラーメッセージが出てボタンが押せず、入力すると動的にエラーメッセージが消えてボタンも押せるようになっていることを確認します。

emailと問合せ内容はまだ静的にエラーメッセージが出ている状態です。

emailバリデーション

同様の要領でemailバリデーションを設定します。
バリデーションは正規表現を使います。

ContactFormViewModel.swift

    import Foundation

    class ContactFormViewModel:ObservableObject{
        @Published var name = "" 
+       @Published  var email = ""
-       var email = ""
        var contactBody = ""
        
        //MARK: -Validation Function
        func isNameValid() -> Bool{
            return name != ""
        }
        
+       func isEmailValid() -> Bool{
+           let emailTest = NSPredicate(format:"SELF MATCHES %@","^[a-z0-9.]+@[a-z0-9.]+\\.[a-z]+$")
+           return emailTest.evaluate(with: email)
+       }
        
        var isComplete:Bool{
-           if !isNameValid() {
+           if !isNameValid() ||
+               !isEmailValid() {
                return false
            }
            return true
        }
        
        // MARK: - Validation Prompt           
        var namePrompt:String{
            if isNameValid(){
                return ""
            }else{
                return "氏名は必須です。"
            }
        }
        
+       var emailPrompt:String{
+           if isEmailValid(){
+               return ""
+           }else{
+               return "emailアドレスは必須かつemailの形式で入力してください。"
+           }
+       }
    }

コピペ用

import Foundation

class ContactFormViewModel:ObservableObject{
    
    @Published var name = ""
    @Published var email = ""
    var contactBody = ""
    
    //MARK: -Validation Function
    func isNameValid() -> Bool{

        return name != ""
    }
    
    func isEmailValid() -> Bool{
        let emailTest = NSPredicate(format:"SELF MATCHES %@","^[a-z0-9.]+@[a-z0-9.]+\\.[a-z]+$")
        return emailTest.evaluate(with: email)
    }
    
    var isComplete:Bool{
        if !isNameValid() ||
            !isEmailValid() {

            return false
        }
        return true
    }
    
    // MARK: - Validation Prompt
    var namePrompt:String{
        if isNameValid(){
            return ""
        }else{
            return "お名前は必須です。"
        }
    }
    
    var emailPrompt:String{
        if isEmailValid(){
            return ""
        }else{
            return "emailアドレスは必須かつemailの形式で入力してください。"
        }
    }
}

ContactFormViewのemailバリデーションメッセージ表示部分を編集します。

ContactFormView.swift

    Group{
        TextField("email",text:$CFVM.email)
            .keyboardType(.emailAddress)
            .textInputAutocapitalization(.never)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .frame(maxWidth: .infinity)
          
-       Text("emailは必須かつemailの形式で入力してください。")
+       Text(CFVM.emailPrompt)
            .multilineTextAlignment(.leading)
            .frame(maxWidth:.infinity,alignment: .leading)
            .padding(.leading, 10.0)
            .foregroundColor(.red)
            .font(.caption2)
    }

バリデーションが同様に動くか確認します。

Bodyバリデーション

同様に設定していきます。

ContactFormViewModel.swift


    import Foundation

    class ContactFormViewModel:ObservableObject{
        @Published var name = ""
        @Published var email = ""
-       var contactBody = ""
+       @Published var contactBody = ""
        
        //MARK: -Validation Function
        func isNameValid() -> Bool{
            return name != ""
        }
        
        func isEmailValid() -> Bool{
            let emailTest = NSPredicate(format:"SELF MATCHES %@","^[a-z0-9.]+@[a-z0-9.]+\\.[a-z]+$")
            return emailTest.evaluate(with: email)
        }
        
+       func isContactBodyValid() -> Bool{
+           let contactBodyTest = NSPredicate(format:"SELF MATCHES %@","^.{1,10}$")
+           return contactBodyTest.evaluate(with: contactBody)
+       }
        
        var isComplete:Bool{
            if !isNameValid() ||
-               !isEmailValid(){
+               !isEmailValid() ||
+               !isContactBodyValid(){
                return false
            }
            return true
        }
        
        // MARK: - Validation Prompt
            
        var namePrompt:String{
            if isNameValid(){
                return ""
            }else{
                return "氏名は必須です。"
            }
        }
        
        var emailPrompt:String{
            if isEmailValid(){
                return ""
            }else{
                return "Emailアドレスは必須かつEmailの形式で入力してください。"
            }
        }
        
+       var contactBodyPrompt:String{
+           if isContactBodyValid(){
+               return ""
+           }else{
+               return "お問い合わせ内容は1文字以上10文字以下で入力してください。"
+           }
+       }
    }

コピペ用

import Foundation

class ContactFormViewModel:ObservableObject{
    
    @Published var name = ""
    @Published var email = ""
    @Published var contactBody = ""
    
    //MARK: -Validation Function
    func isNameValid() -> Bool{

        return name != ""
    }
    
    func isEmailValid() -> Bool{
        let emailTest = NSPredicate(format:"SELF MATCHES %@","^[a-z0-9.]+@[a-z0-9.]+\\.[a-z]+$")
        return emailTest.evaluate(with: email)
    }
    
    func isContactBodyValid() -> Bool{
        let contactBodyTest = NSPredicate(format:"SELF MATCHES %@","^.{1,10}$")
        return contactBodyTest.evaluate(with: contactBody)
    }
    
    var isComplete:Bool{
        if !isNameValid() ||
            !isEmailValid() ||
            !isContactBodyValid(){

            return false
        }
        return true
    }
    
    // MARK: - Validation Prompt
    var namePrompt:String{
        if isNameValid(){
            return ""
        }else{
            return "お名前は必須です。"
        }
    }
    
    var emailPrompt:String{
        if isEmailValid(){
            return ""
        }else{
            return "emailアドレスは必須かつemailの形式で入力してください。"
        }
    }
    
    var contactBodyPrompt:String{
        if isContactBodyValid(){
            return ""
        }else{
            return "お問い合わせ内容は1文字以上10文字以下で入力してください。"
        }
    }

}

ContactFormViewのbodyバリデーションメッセージ表示部分を編集します。

ContactFormView.swift

    Group{
        TextField("問い合わせ",text:$CFVM.contactBody)
            .keyboardType(.emailAddress)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .frame(maxWidth: .infinity)

-       Text("問合せ内容は必須かつ1文字以上10文字以内で入力して下さい。")    
+       Text(CFVM.contactBodyPrompt)
            .multilineTextAlignment(.leading)
            .frame(maxWidth:.infinity,alignment: .leading)
            .padding(.leading, 10.0)
            .foregroundColor(.red)
            .font(.caption2)
    }

動作確認

エラーメッセージとボタンの色が動的に表示されたり消えたりすることを確認します。

バリデーションが完成しました。

最終的なコード

ContactFormViewModel

ContactFormViewModel

import Foundation

class ContactFormViewModel:ObservableObject{
    
    @Published var name = ""
    @Published var email = ""
    @Published var contactBody = ""
    
    //MARK: -Validation Function
    func isNameValid() -> Bool{

        return name != ""
    }
    
    func isEmailValid() -> Bool{
        let emailTest = NSPredicate(format:"SELF MATCHES %@","^[a-z0-9.]+@[a-z0-9.]+\\.[a-z]+$")
        return emailTest.evaluate(with: email)
    }
    
    func isContactBodyValid() -> Bool{
        let contactBodyTest = NSPredicate(format:"SELF MATCHES %@","^.{1,10}$")
        return contactBodyTest.evaluate(with: contactBody)
    }
    
    var isComplete:Bool{
        if !isNameValid() ||
            !isEmailValid() ||
            !isContactBodyValid(){

            return false
        }
        return true
    }
    
    // MARK: - Validation Prompt
    var namePrompt:String{
        if isNameValid(){
            return ""
        }else{
            return "お名前は必須です。"
        }
    }
    
    var emailPrompt:String{
        if isEmailValid(){
            return ""
        }else{
            return "emailアドレスは必須かつemailの形式で入力してください。"
        }
    }
    
    var contactBodyPrompt:String{
        if isContactBodyValid(){
            return ""
        }else{
            return "お問い合わせ内容は1文字以上10文字以下で入力してください。"
        }
    }

}

ContactFormView

ContactFormView

import SwiftUI

struct ContactFormView: View {
    @ObservedObject var CFVM = ContactFormViewModel()
    
    var body: some View {
        VStack{
            Text("Contact").font(.title)
                            
            VStack{
                Text("お問合わせフォーム").font(.headline).foregroundColor(.white)
            }
            .frame(maxWidth:.infinity)
            .frame(height:100)
            .background(.blue)
            
            VStack{
                Text("お問合わせ内容を入力してください。").padding()
                Group{
                    TextField("お名前",text:$CFVM.name)
                        .keyboardType(.default)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                        
                    Text(CFVM.namePrompt)
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                    
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("email",text:$CFVM.email)
                        .keyboardType(.emailAddress)
                        .textInputAutocapitalization(.never)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text(CFVM.emailPrompt)
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Group{
                    TextField("問合わせ内容",text:$CFVM.contactBody)
                        .keyboardType(.emailAddress)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: .infinity)
                      
                    Text(CFVM.contactBodyPrompt)
                        .multilineTextAlignment(.leading)
                        .frame(maxWidth:.infinity,alignment: .leading)
                        .padding(.leading, 10.0)
                        .foregroundColor(.red)
                        .font(.caption2)
                }.padding(.bottom, 10.0)
                
                Button(action:{
                      
                }){
                    Text("送信")
                        .frame(minWidth: 160)
                        .foregroundColor(.white)
                        .padding(12)
                        .background(Color.accentColor)
                        .cornerRadius(8)
                }
                .opacity(CFVM.isComplete ? 1 : 0.5)
                .disabled(!CFVM.isComplete)

                Spacer()
                    
            }.frame(maxWidth:.infinity).frame(height:500)
                            
        }
    }
}

struct ContactFormView_Previews: PreviewProvider {
    static var previews: some View {
        ContactFormView()
    }
}

関連コンテンツ