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

Codeplayon2 months agoApril 17, 2024How to create TextField that only accepts numbers How to remove special characters from the `TextField` in SwiftUI How to restrict certain characters in UITextField in Swift?How to use FormatStyle to restrict TextField input in SwiftUI SwiftUI TextField prevent certain characters

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

Table of Contents

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()
    }
}

add a comment