Android Academy · Leçon

Valider la saisie

Vérifiez la saisie et affichez des erreurs utiles.

Valider la saisie est une leçon Android Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Android Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Android Academy comprend 4 leçons au total.

Pourquoi valider les saisies

Les utilisateurs font des erreurs : un nom vide, une adresse e-mail mal formée, un mot de passe trop court. Les bons formulaires détectent rapidement ces problèmes et expliquent clairement quoi corriger.

Dans cette leçon, vous ajouterez la validation aux formulaires Compose, afficherez les erreurs directement dans les champs et désactiverez le bouton d'envoi tant que tout n'est pas valide.

Une règle de validation n'est qu'une fonction

Conservez la logique de validation dans de simples fonctions Kotlin qui prennent une valeur et renvoient une indication de validité (ou un message d'erreur). Les règles sont ainsi réutilisables et faciles à tester.

Voici une vérification simple d'adresse e-mail.

fun emailError(email: String): String? = when {
    email.isBlank() -> "Email is required"
    !email.contains("@") -> "Enter a valid email"
    else -> null
}

Afficher l'erreur sur le champ

OutlinedTextField possède un indicateur isError et un emplacement supportingText. Combinez-les pour afficher un champ rouge accompagné d'un message en dessous.

L'erreur provient directement de votre fonction de validation.

var email by remember { mutableStateOf("") }
val error = emailError(email)

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    isError = error != null,
    supportingText = { if (error != null) Text(error) }
)

Ne criez pas trop tôt

Afficher « L'adresse e-mail est obligatoire » avant même que l'utilisateur ait touché au champ peut sembler hostile. Une solution courante consiste à suivre si un champ a été touché et à n'afficher les erreurs qu'ensuite.

Ici, nous marquons le champ comme touché dès qu'il perd le focus.

var email by remember { mutableStateOf("") }
var touched by remember { mutableStateOf(false) }
val error = if (touched) emailError(email) else null

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    isError = error != null,
    modifier = Modifier.onFocusChanged {
        if (!it.isFocused) touched = true
    }
)

Valider un mot de passe

Les mots de passe obéissent généralement à plusieurs règles. Renvoyez la première règle qui échoue afin que l'utilisateur corrige un seul problème à la fois.

Remarquez qu'il s'agit toujours d'une fonction pure, sans interface utilisateur.

fun passwordError(pw: String): String? = when {
    pw.length < 8 -> "At least 8 characters"
    pw.none { it.isDigit() } -> "Add a number"
    pw.none { it.isUpperCase() } -> "Add an uppercase letter"
    else -> null
}

Validation entre plusieurs champs

Certaines règles concernent deux champs, par exemple « la confirmation du mot de passe doit correspondre au mot de passe ». Elles ne peuvent pas être placées dans une fonction dédiée à un seul champ ; calculez-les donc là où les deux valeurs sont disponibles.

var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }

val confirmError =
    if (confirm.isNotEmpty() && confirm != password)
        "Passwords don't match"
    else null

Désactiver l'envoi tant que le formulaire n'est pas valide

Le formulaire entier est valide lorsque toutes les règles sont respectées. Calculez une seule valeur booléenne et utilisez-la pour activer ou désactiver le bouton d'envoi.

Cela empêche l'utilisateur d'envoyer des données incorrectes dès le départ.

val formValid =
    emailError(email) == null &&
    passwordError(password) == null &&
    confirmError == null

Button(onClick = { submit() }, enabled = formValid) {
    Text("Create Account")
}

Valider lors de l'envoi

La validation directement dans les champs guide l'utilisateur, mais vous devez également tout revérifier lorsqu'il appuie sur le bouton d'envoi. Le gestionnaire d'envoi décide s'il faut continuer ou afficher toutes les erreurs en une seule fois.

fun onSubmit() {
    val errors = listOfNotNull(
        emailError(email),
        passwordError(password)
    )
    if (errors.isEmpty()) {
        register(email, password)
    } else {
        // show errors / mark fields touched
    }
}

Limiter ce qui peut être saisi

La validation peut également être préventive. Pour un numéro de téléphone, ignorez simplement les caractères qui ne sont pas des chiffres dans onValueChange, afin que la saisie incorrecte n'entre jamais dans l'état.

C'est plus agréable que de réprimander l'utilisateur après coup.

var phone by remember { mutableStateOf("") }

OutlinedTextField(
    value = phone,
    onValueChange = { input ->
        phone = input.filter { it.isDigit() }.take(10)
    },
    label = { Text("Phone") }
)

Centraliser la validation dans le ViewModel

Pour les vrais écrans, conservez la validation dans le ViewModel afin que l'interface se contente d'afficher les résultats. Le ViewModel expose les erreurs ainsi qu'un indicateur isValid.

Les composables restent ainsi dépourvus de logique et vos règles peuvent être testées au niveau unitaire.

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

    val emailError: String?
        get() = emailError(email)

    val isValid: Boolean
        get() = emailError == null && email.isNotBlank()

    fun onEmailChange(value: String) { email = value }
}

Kotlin pur : tester les règles

Comme les validateurs sont des fonctions pures, vous pouvez les exécuter n'importe où. Ici, les règles concernant l'adresse e-mail et le mot de passe s'exécutent de manière autonome, comme lors d'un test unitaire.

fun emailError(email: String): String? = when {
    email.isBlank() -> "Email is required"
    !email.contains("@") -> "Enter a valid email"
    else -> null
}

fun main() {
    println(emailError(""))
    println(emailError("nope"))
    println(emailError("ada@dev.io"))
}

Vérification rapide

Quel couple de propriétés de OutlinedTextField permet de marquer un champ comme invalide et d'afficher un message en dessous ?

Récapitulatif

Vous savez maintenant valider proprement les formulaires Compose :

Conservez les règles sous forme de fonctions pures qui renvoient un message d'erreur ou null.
Affichez les erreurs avec isError + supportingText, et évitez de signaler un problème avant que le champ ait été touché.
Gérez les règles entre plusieurs champs là où les deux valeurs sont visibles.
Désactivez l'envoi tant que le formulaire entier n'est pas valide, puis revérifiez les données lors de l'envoi.
Empêchez les saisies incorrectes avec filter et centralisez les règles dans un ViewModel.

Ensuite : les types de clavier, les actions IME et la gestion du focus.

Questions Fréquemment Posées

La leçon « Valider la saisie » est-elle gratuite ?

Oui — le texte complet de « Valider la saisie » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Android Academy, passe à CoddyKit PRO. Le cours Android Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Valider la saisie » ?

Vérifiez la saisie et affichez des erreurs utiles. Tu pratiques Android Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Android Academy ?

Aucune expérience préalable n'est requise. Android Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.

Combien de temps prend la leçon « Valider la saisie » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Android Academy ?

Oui. Chaque leçon Android Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Android Academy