Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Login Dialog with validated email input in Qt Quick

From Wiki
Jump to: navigation, search

This article demonstrates how to create an email validation dialog using Qt Quick.

Article Metadata
Code Example
Installation file: Media: LoginDialogQML.sis
Tested with
Devices(s): N8 (Nokia Belle)
Platform(s): Symbian^3 OS
Platform Security
Signing Required: Self-Signed
Keywords: Dialog, Email Validation
Created: somnathbanik (08 Apr 2012)
Last edited: hamishwillee (02 May 2012)



In this article we will create an email validation dialog using QML CommonDialog Element. This dialog has the following features.

  • Validate email address using regular expression
  • Don’t allow empty fields
  • Display error message on the dialog
  • Highlight the error text field
  • Allow to set minimum number of password characters


Let’s create an empty QML project. We use the QML CommonDialog Element to create an empty dialog.


To enter email and password we add two TextField in the CommonDialog.

TextField {
id: textFieldEmail
width: contentColumn.width - textEmail.font.pixelSize*5
echoMode: TextInput.Normal
placeholderText: qsTr( "Enter email" )
anchors.left: parent.left
validator: RegExpValidator { regExp:/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/ }
onTextChanged: {
textError.state ="hide";
textError.text = "";

And a Text Element is used to display the error message on the dialog.

Text {
id: textError
text: qsTr("")
anchors.horizontalCenter: contentColumn.horizontalCenter
color: platformStyle.colorNormalLight platformStyle.fontFamilyRegular
font.pixelSize: platformStyle.fontSizeSmall
state: "hide"
states: [
State {
name: "show"
PropertyChanges { target: textError; height: textError.paintedHeight; visible:true; }
State {
name: "hide"
PropertyChanges { target: textError; height: 1; visible:false; }

We add a login and a cancel Button on the dialog. After user enters the email address and password and clicks the login Button it first checks the email empty field, then validate the email address with QML TextField Element acceptableInput property, check password empty field and then password minimum characters.

if(textFieldEmail.acceptableInput) //validating email using acceptableInput property of TextField
if(textFieldPassword.text!=="" )
if(textFieldPassword.text.length >= minPasswordChar)
email = textFieldEmail.text;
password = textFieldPassword.text;
showError("Password can't be less then "+minPasswordChar+" characters");
textFieldPassword.errorHighlight = true;
showError("Password can't be empty");
textFieldPassword.errorHighlight = true;
showError("Invalid email address")
textFieldEmail.errorHighlight = true;
showError("Email can't be empty");
textFieldEmail.errorHighlight = true;

If there is any error message during validation it got displayed on the dialog, and the error TextField is highlighted. To use this dialog you can download the project source code and import the EmailValidatorDialog.qml into your project and call EmailValidatorDialog using launchDialog() function.

titleText: "Login Dialog"
minPasswordChar: 6
console.log( "Email : " + )
console.log( "Password : "+loginDialog.password);
onRejected: console.log( "Dialog Closed" )
id: buttonLaunch
text: "Click Me!"
anchors.centerIn: parent
onClicked: loginDialog.launchDialog();


This dialog can also be customized and modified according to your future use.

Source Code

This page was last modified on 2 May 2012, at 05:22.
176 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.