Invoer valideren
Controleer invoer en toon duidelijke foutmeldingen.
Invoer valideren is een gratis Android Academy-les op CoddyKit. Dit is les 3 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Android Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Android Academy bevat in totaal 4 lessen.
Waarom invoer valideren
Gebruikers maken fouten: een lege naam, een ongeldig e-mailadres of een te kort wachtwoord. Goede vormen vangen deze fouten vroeg op en leggen duidelijk uit wat er moet worden aangepast.
In deze les voeg je validatie toe aan Compose-vormen, toon je inline-fouten en schakel je de verzendknop uit totdat alles geldig is.
Een validatieregel is gewoon een functie
Houd validatielogica in gewone Kotlin-functies die een waarde aannemen en teruggeven of die geldig is (of een foutmelding). Daardoor zijn regels herbruikbaar en eenvoudig te testen.
Hier zie je een eenvoudige controle voor een e-mailadres.
fun emailError(email: String): String? = when {
email.isBlank() -> "Email is required"
!email.contains("@") -> "Enter a valid email"
else -> null
}De fout op het veld tonen
OutlinedTextField heeft een vlag isError en een supportingText-slot. Combineer ze om een rood veld met een bericht eronder te tonen.
De fout komt rechtstreeks uit je validatiefunctie.
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) }
)Schreeuw niet te vroeg
"E-mailadres is verplicht" tonen voordat de gebruiker het veld zelfs maar heeft aangeraakt, voelt vijandig. Een gebruikelijke oplossing is bijhouden of een veld is aangeraakt en fouten pas daarna tonen.
Hier markeren we het veld als aangeraakt zodra het de focus verliest.
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
}
)Een wachtwoord valideren
Wachtwoorden hebben meestal meerdere regels. Geef de eerste regel terug die niet slaagt, zodat de gebruiker één ding tegelijk kan oplossen.
Let op: dit is nog steeds een pure functie zonder gebruikersinterface.
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
}Validatie tussen velden
Sommige regels hebben betrekking op twee velden, bijvoorbeeld "het bevestigde wachtwoord moet overeenkomen met het wachtwoord". Deze regels kunnen niet in een functie voor één veld staan, dus bereken ze waar beide waarden beschikbaar zijn.
var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }
val confirmError =
if (confirm.isNotEmpty() && confirm != password)
"Passwords don't match"
else nullVerzenden uitschakelen totdat alles geldig is
De hele vorm is geldig wanneer elke regel slaagt. Bereken één booleaanse waarde en gebruik die om de verzendknop in of uit te schakelen.
Zo voorkom je dat de gebruiker überhaupt ongeldige gegevens verzendt.
val formValid =
emailError(email) == null &&
passwordError(password) == null &&
confirmError == null
Button(onClick = { submit() }, enabled = formValid) {
Text("Create Account")
}Valideren bij verzenden
Inline-validatie helpt de gebruiker, maar je moet alles ook opnieuw controleren wanneer die op Verzenden drukt. De handler voor verzenden bepaalt of het proces doorgaat of dat alle fouten tegelijk worden getoond.
fun onSubmit() {
val errors = listOfNotNull(
emailError(email),
passwordError(password)
)
if (errors.isEmpty()) {
register(email, password)
} else {
// show errors / mark fields touched
}
}Beperken wat er kan worden getypt
Validatie kan ook preventief zijn. Voor een telefoonnummer negeer je eenvoudig niet-cijfertekens binnen onValueChange, zodat de ongeldige invoer nooit in de status terechtkomt.
Dit is vriendelijker dan de gebruiker achteraf terechtwijzen.
var phone by remember { mutableStateOf("") }
OutlinedTextField(
value = phone,
onValueChange = { input ->
phone = input.filter { it.isDigit() }.take(10)
},
label = { Text("Phone") }
)Validatie centraliseren in het ViewModel
Houd validatie voor echte schermen in het ViewModel, zodat de gebruikersinterface alleen resultaten weergeeft. Het ViewModel stelt fouten en een vlag isValid beschikbaar.
Zo blijven composables eenvoudig en kunnen je regels met unittests worden getest.
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 }
}Puur Kotlin: de regels testen
Omdat validators pure functies zijn, kun je ze overal uitvoeren. Hier worden de regels voor e-mail en wachtwoord zelfstandig uitgevoerd, net zoals een unittest ze zou aanroepen.
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"))
}Korte controle
Welk eigenschappenpaar van OutlinedTextField gebruik je om een veld als ongeldig te markeren en er een bericht onder te tonen?
Samenvatting
Je valideert Compose-vormen nu op een overzichtelijke manier:
- Houd regels als pure functies die een foutmelding of null teruggeven.
- Toon fouten met
isError+supportingTexten schreeuw niet voordat een veld is aangeraakt. - Verwerk regels tussen velden waar beide waarden zichtbaar zijn.
- Schakel verzenden uit totdat de hele vorm geldig is en controleer alles opnieuw bij het verzenden.
- Voorkom ongeldige invoer met
filteren centraliseer regels in een ViewModel.
Volgende: toetsenbordtypen, IME-acties en focusbeheer.
Leer Kotlin met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 36
- Lessen
- 152
Veelgestelde vragen
Is de les “Invoer valideren” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Android Academy, waaronder “Invoer valideren”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Android Academy bevat in totaal 4 lessen.
Wat leer ik in “Invoer valideren”?
Controleer invoer en toon duidelijke foutmeldingen. Je oefent met Android Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Android Academy te beginnen?
Ervaring vooraf is niet nodig. Android Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Invoer valideren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Android Academy?
Ja. Elke les over Android Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.