×
Namespaces

Variants
Actions

Login Dialog with validated email input in Qt Quick

From Nokia Developer 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)
Compatibility
Platform(s): Symbian^3 OS
Symbian
Platform Security
Signing Required: Self-Signed
Article
Keywords: Dialog, Email Validation
Created: somnathbanik (08 Apr 2012)
Last edited: hamishwillee (02 May 2012)

Contents

Introduction

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

Implementation

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

CommonDialog{
id:emailDialog
}

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
errorHighlight:false;
placeholderText: qsTr( "Enter email" )
anchors.left: parent.left
anchors.leftMargin:textEmail.font.pixelSize*5
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
font.family: 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.text!=="")
{
if(textFieldEmail.acceptableInput) //validating email using acceptableInput property of TextField
{
if(textFieldPassword.text!=="" )
{
if(textFieldPassword.text.length >= minPasswordChar)
{
email = textFieldEmail.text;
password = textFieldPassword.text;
accept();
}
else
{
showError("Password can't be less then "+minPasswordChar+" characters");
textFieldPassword.errorHighlight = true;
}
}
else
{
showError("Password can't be empty");
textFieldPassword.errorHighlight = true;
}
}
else
{
showError("Invalid email address")
textFieldEmail.errorHighlight = true;
}
}
else
{
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.

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

Summary

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 08:22.
139 page views in the last 30 days.
×