web-dev-qa-db-fra.com

Affichage d'une erreur de validation sur iOS UITextField similaire à TextView.setError () d'Android

Existe-t-il un moyen d'afficher une erreur de validation sur une UITextField semblable au TextView.setError() d'Android dans swift?

iosswiftuikit
13
ihsan

UITextField ne vient pas avec une fonction de validation prête à l'emploi. Vous pouvez trouver des API open source pour vous aider à accomplir cela. Une option possible serait d’examiner l’application SSValidationTextField . 

Code serait 

var phoneValidationTextField = SSValidationTextField(frame: CGRectMake(200, 200, 150, 50))
phoneValidationTextField.validityFunction = self.isValidPhone
phoneValidationTextField.delaytime = 0.5
phoneValidationTextField.errorText = "Incorrect Format"
phoneValidationTextField.successText = "Valid Format"
phoneValidationTextField.borderStyle = UITextBorderStyle.RoundedRect
self.addSubview(phoneValidationTextField)
2
S Shahid

Juste partager quelque chose que j'utilise souvent. Ceci est conçu pour s'adapter à TextFields "bordure inférieure seulement". - Parce que je les aime;) - mais peut facilement être personnalisé pour s'adapter à tout style

Exemple de bordure inférieure

Extension permettant de configurer le champ de texte pour afficher uniquement une ligne inférieure:

extension UITextField {
    func setBottomBorderOnlyWith(color: CGColor) {
        self.borderStyle = .none            
        self.layer.masksToBounds = false
        self.layer.shadowColor = color
        self.layer.shadowOffset = CGSize(width: 0.0, height: 1.0)
        self.layer.shadowOpacity = 1.0
        self.layer.shadowRadius = 0.0
    }
}

Puis une autre extension pour le faire clignoter en rouge et le secouer indiquant qu'il y a une erreur de validation:

extension UITextField {
    func isError(baseColor: CGColor, numberOfShakes shakes: Float, revert: Bool) {
        let animation: CABasicAnimation = CABasicAnimation(keyPath: "shadowColor")
        animation.fromValue = baseColor
        animation.toValue = UIColor.red.cgColor
        animation.duration = 0.4
        if revert { animation.autoreverses = true } else { animation.autoreverses = false }
        self.layer.add(animation, forKey: "")

        let shake: CABasicAnimation = CABasicAnimation(keyPath: "position")
        shake.duration = 0.07
        shake.repeatCount = shakes
        if revert { shake.autoreverses = true  } else { shake.autoreverses = false }
        shake.fromValue = NSValue(cgPoint: CGPoint(x: self.center.x - 10, y: self.center.y))
        shake.toValue = NSValue(cgPoint: CGPoint(x: self.center.x + 10, y: self.center.y))
        self.layer.add(shake, forKey: "position")
    }
}

Comment utiliser:

Configurez UITextField pour afficher uniquement la bordure inférieure dans viewDidLoad:

override func viewDidLoad() {
    myTextField.setBottomBorderOnlyWith(color: UIColor.gray.cgColor)
}

Ensuite, quand un bouton est cliqué et que vous ne validez pas le champ:

@IBAction func someButtonIsClicked(_ sender: Any) {
    if let someValue = myTextField, !name.isEmpty {
        // Good To Go!
    } else {
        myTextField.isError(baseColor: UIColor.gray.cgColor, numberOfShakes: 3, revert: true)
    }
}
11
SpanTag

Vous pouvez valider le texte en définissant le délégué UITextField sur votre contrôleur de vue, puis procédez comme suit:

func textField(textField: UITextField, shouldChangeCharactersInRange range: NSRange, replacementString string: String) -> Bool {

   // Your method to validate the input
   // self.validateInputText()

   return true
}

Et vous pouvez même changer la couleur de sa bordure si vous voulez:

textField.layer.borderColor = UIColor.redColor().CGColor

J'espère que cela vous aidera.

7
Victor Sigler

Non, vous devez

  1. sous-classe la UITextField 

  2. Créez une fonction qui setError, appelons-la func setError()

  3. Dans cette fonction, vous pouvez créer une UIImageView qui contient une UIImage (image d'erreur). Définissez-le sur la vue de droite de UITextField en utilisant UITextField.rightView 

  4. N'oubliez pas de configurer le UITextField.rightViewMode pour qu'il affiche toujours

MODIFIER:

Alternativement, si vous ne préférez pas le sous-classement. Vous pouvez directement définir le rightVIew de la UITextField sur une UIImageView contenant une image d'erreur

3
JayVDiyk

Non, il n'y a pas de méthode intégrée disponible pour faire la même chose. Pour cela, vous devez personnaliser la UITextField.

Il existe une bibliothèque open-source disponible pour cela. Vous pouvez en trouver un ici: US2FormValidator

0
Midhun MP