How to create TextField validation that only accepts numbers, characters, special characters

by · Published · Updated

create a TextField input validation for your iOS App to block user to enter only number,  only character. Also you can mange alphanumerical to enter both only not accepting special character.

Like you want to create a form in your App and you need to add validation at user input time to filter user input base on requirement.

A custom inout Format can help you control the allowed characters and number of a SwiftUI TextField. You might want to allow numbers only or a specific set of characters. While you could use a formatter in many cases, it’s good to know there’s a flexible solution using a custom FormatStyle implementation.

There are many way to implement these validator on this article i am share with onChange and onReceive.

TextField validation that only accepts numbers

TextField("Number Only", text: $codeNumber)
                    .padding()
                    .background(Color.themeTextField)
                    .cornerRadius(20.0)
                    .shadow(radius: 10.0, x: 20, y: 10)
                    .onReceive(Just(codeNumber)) { newValue in
                        let allowedCharacters = "0123456789"
                        let filtered = newValue.filter { allowedCharacters.contains($0) }
                        if filtered != newValue {
                            self.codeNumber = filtered
                        }
                    }.padding(.top,10)

 

Validation that only accepts characters

TextField("Characters only", text: $codeChart)
                    .padding()
                    .background(Color.themeTextField)
                    .cornerRadius(20.0)
                    .shadow(radius: 10.0, x: 20, y: 10)
                    .onReceive(Just(codeChart)) { newValue in
                        let allowedCharacters = "abcdefghijklmnopqrstuvwxyz 
ABCDEFGHIJKLMNOPQRSTUVWXYZ"
                        let filtered = newValue.filter { allowedCharacters.contains($0) }
                        if filtered != newValue {
                            self.codeChart = filtered
                        }
                    }.padding(.top,10)

 

 

Validation that only accepts alphanumerics

TextField("Input Limit With alphanumerics", text: $inputText)
                    .padding()
                    .background(Color.themeTextField)
                    .cornerRadius(20.0)
                    .shadow(radius: 10.0, x: 20, y: 10)
                    .onChange(of: inputText) { _ in
                        // check character set
                        var checked = inputText.trimmingCharacters(in: 
CharacterSet.alphanumerics.inverted)
                        // check length
                        checked = String(checked.prefix(maxCount)) // regards to Leo Dabus
                        inputText = checked
                    }.padding(.top,20)

 

TextField validation Full Source Code

import Foundation
import SwiftUI
import Combine

struct TextFiltering: View {

    @State private var userName = ""
    @State private var codeNumber = ""
    @State private var codeChart = ""
    @State private var inputText = ""
    let maxCount = 10


    var body: some View {

        ScrollView{
            VStack() {
                TextField("Username", text: $userName)
                    .padding()
                    .background(Color.themeTextField)
                    .cornerRadius(20.0)
                    .shadow(radius: 10.0, x: 20, y: 10)
                    .onReceive(Just(userName)) { newValue in
                        let allowedCharacters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789._-"
                        let filtered = newValue.filter { allowedCharacters.contains($0) }
                        if filtered != newValue {
                            self.userName = filtered
                        }
                    }.padding(.bottom,10)

                
                TextField("Number Only", text: $codeNumber)
                    .padding()
                    .background(Color.themeTextField)
                    .cornerRadius(20.0)
                    .shadow(radius: 10.0, x: 20, y: 10)
                    .onReceive(Just(codeNumber)) { newValue in
                        let allowedCharacters = "0123456789"
                        let filtered = newValue.filter { allowedCharacters.contains($0) }
                        if filtered != newValue {
                            self.codeNumber = filtered
                        }
                    }.padding(.top,10)


                TextField("Characters only", text: $codeChart)
                    .padding()
                    .background(Color.themeTextField)
                    .cornerRadius(20.0)
                    .shadow(radius: 10.0, x: 20, y: 10)
                    .onReceive(Just(codeChart)) { newValue in
                        let allowedCharacters = "abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ"
                        let filtered = newValue.filter { allowedCharacters.contains($0) }
                        if filtered != newValue {
                            self.codeChart = filtered
                        }
                    }.padding(.top,10)

                
                TextField("Input Limit With alphanumerics", text: $inputText)
                    .padding()
                    .background(Color.themeTextField)
                    .cornerRadius(20.0)
                    .shadow(radius: 10.0, x: 20, y: 10)
                    .onChange(of: inputText) { _ in
                        // check character set
                        var checked = inputText.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
                        // check length
                        checked = String(checked.prefix(maxCount)) // regards to Leo Dabus
                        inputText = checked
                    }.padding(.top,20)
            }.padding()
        }
    }
}

struct TextFiltering_Previews: PreviewProvider {
    static var previews: some View {
        TextFiltering()
    }
}

 

 

Read More :

Tags:

You may also like...