SwiftUI - Textfield Validation with button and Conditional Statement

Question

I want to validate the input of the textfield by pressing a button. When a user puts in a specific word in the textfield (for example: Predator) it should trigger the TextfieldVal Boolean and set it to true when the button "Send" is pressed. Anything else put in the textfield other then predator should be false.

Now I've been searching the internet for hours and still couldn't find my answer. Asked some people in my environment, but they can't help me either. Could you please send me in the right direction.

This is the code I came up with so far. The bool works, but I miss the function of making it work as intended. So validating the textfield and making a specific word return a true, anything else a false.

        @State var Textfield: String = ""
        @State var Answer: String = ""
        @State var ShowButton: Bool = false
        @State var TextFieldVal: Bool = false
       

        var body: some View {

                    VStack{
                        Text(Answer)
                            .frame(width: 400, height: 40, alignment: .center)
                            .font(.title)
                            .foregroundColor(Color.black)
                    
                    
                    TextField("Type here you answer...", text: $Textfield)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(width: 250, height: 40, alignment: .center)
                        .background(Color.gray.opacity(0.5).cornerRadius(20))
                        .foregroundColor(.red)
                        .font(.headline)
                        
                        
                        Button {
                            
                            if TextFieldVal == true {
                                ShowButton = true
                                Answer = String ("That is Correct!")
                            } else {
                                Answer = ("That is not correct")
                            }
                                            
                                
                        } label: {
                            Text("Send")
                                .frame(width: 250, height: 40)
                                .background(Color(red: 0.272, green: 0.471, blue: 0.262))
                                .cornerRadius(20)
                                .foregroundColor(.white)
                                .font(.headline)
                            
                            if ShowButton {
                                NavigationLink(
                                    destination: Finish(),
                                
                                    label: {
                                        Text("Next")
                                            .frame(width: 120, height: 40)
                                            .background(Color.red)
                                            .cornerRadius(20)
                                            .shadow(radius: 10)
                                            .overlay(
                                                Text("Verder")
                                                    .foregroundColor(.white)
                                    
             
                            )}
                                    )}
                                }
                        
                        }
            

                    }
                    
                    }
                  

Answer 1

Use onChange modifier. Example:

 @State var Textfield: String = ""
    @State var Answer: String = "Predator"
    @State var ShowButton: Bool = false
    @State var TextFieldVal: Bool = false
    
    
    var body: some View {
        
        VStack{
            Text(Answer)
                .frame(width: 400, height: 40, alignment: .center)
                .font(.title)
                .foregroundColor(Color.black)
            
            
            TextField("Type here you answer...", text: $Textfield)
                .textFieldStyle(RoundedBorderTextFieldStyle())
                .frame(width: 250, height: 40, alignment: .center)
                .background(Color.gray.opacity(0.5).cornerRadius(20))
                .foregroundColor(.red)
                .font(.headline)
            
            
            Button {
                
                if TextFieldVal == true {
                    ShowButton = true
                    Answer = "That is Correct!"
                } else {
                    
                    Answer = "That is not correct"
                }
                
                
            } label: {
                Text("Send")
                    .frame(width: 250, height: 40)
                    .background(Color(red: 0.272, green: 0.471, blue: 0.262))
                    .cornerRadius(20)
                    .foregroundColor(.white)
                    .font(.headline)
                
                if ShowButton {
                    NavigationLink(
                        destination: Example1(),
                        
                        label: {
                            Text("Next")
                                .frame(width: 120, height: 40)
                                .background(Color.red)
                                .cornerRadius(20)
                                .shadow(radius: 10)
                                .overlay(
                                    Text("Verder")
                                        .foregroundColor(.white)
                                    
                                    
                                )}
                    )}
            }
            
        }
        .onChange(of: Textfield) { _ in
            if Textfield == "Predator" {
                TextFieldVal = true
            } else {
                TextFieldVal = false
            }
        }
        
        
    }