Valider la saisie à mesure que l'utilisateur saisit du texte

Vous pouvez valider les entrées pendant que l'utilisateur saisit du texte dans un champ, par exemple un nom, une adresse e-mail, une adresse postale ou d'autres coordonnées. Cette validation réduit les erreurs et permet à vos utilisateurs de gagner du temps.

Résultats

Une entrée de texte valide
Figure 1. Champ de saisie de texte avec des validateurs d'adresse e-mail n'affichant aucun message d'erreur pour une adresse e-mail valide.
Saisie de texte incorrecte avec des erreurs
Figure 2. Champ de saisie de texte affichant un message d'erreur lorsqu'une adresse e-mail non valide est saisie.

Compatibilité des versions

Cette implémentation nécessite que le minSDK de votre projet soit défini sur le niveau d'API 21 ou supérieur.

Dépendances

Valider les entrées pendant la saisie de l'utilisateur

Utilisez le code suivant pour afficher l'entrée de champ et valider le texte pendant que l'utilisateur saisit du texte. Si les informations ne sont pas validées, un message d'erreur aide l'utilisateur à corriger l'entrée.

class EmailViewModel : ViewModel() {
    var email by mutableStateOf("")
        private set

    val emailHasErrors by derivedStateOf {
        if (email.isNotEmpty()) {
            // Email is considered erroneous until it completely matches EMAIL_ADDRESS.
            !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()
        } else {
            false
        }
    }

    fun updateEmail(input: String) {
        email = input
    }
}

@Composable
fun ValidatingInputTextField(
    email: String,
    updateState: (String) -> Unit,
    validatorHasErrors: Boolean
) {
    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        value = email,
        onValueChange = updateState,
        label = { Text("Email") },
        isError = validatorHasErrors,
        supportingText = {
            if (validatorHasErrors) {
                Text("Incorrect email format.")
            }
        }
    )
}

@Preview
@Composable
fun ValidateInput() {
    val emailViewModel: EmailViewModel = viewModel<EmailViewModel>()
    ValidatingInputTextField(
        email = emailViewModel.email,
        updateState = { input -> emailViewModel.updateEmail(input) },
        validatorHasErrors = emailViewModel.emailHasErrors
    )
}
TextSnippets.kt

Points clés concernant le code

  • Définit un composable qui réutilise le OutlinedTextField composant, en ajoutant les paramètres requis pour afficher les messages d'erreur du validateur pendant la saisie de l'utilisateur.
  • EmailViewModel permet de conserver l'état et de fournir la logique de validation des adresses e-mail.
  • Si isError est défini sur "True", l'interface utilisateur fournit un indicateur visuel de l'état d'erreur de validation.
  • Le composant affiche le message "Format d'adresse e-mail incorrect" jusqu'à ce qu'une adresse e-mail complète et correcte soit saisie.

Collections contenant ce guide

Ce guide fait partie de ces collections de guides rapides organisées qui couvrent des objectifs de développement Android plus larges :

Texte à afficher

Le texte est un élément central de toute interface utilisateur. Découvrez différentes façons de présenter du texte dans votre application pour offrir une expérience utilisateur agréable.
Collection de guides rapides
Découvrez comment implémenter des moyens permettant aux utilisateurs d'interagir avec votre application en saisissant du texte et en utilisant d'autres méthodes de saisie.
Collection de guides rapides

Questions ou commentaires

Consultez notre page de questions fréquentes pour en savoir plus sur les guides rapides ou contactez-nous pour nous faire part de vos commentaires.
Accéder aux questions fréquentes Laisser un commentaire