Namespaces
Variants
Actions

Login Dialog with validated email input in Qt and Windows Phone

Jump to: navigation, search

This article demonstrates how to create a Login Page with validated email input in Qt and Windows Phone.

Article Metadata

Code Example
Tested with
SDK: Windows Phone SDK 8.0, Qt SDK 1.2
Devices(s): Nokia Lumia 820, Lumia 920

Compatibility
Platform(s): Windows Phone 8.0/ 7.1

Platform Security
Signing Required: Self-Signed

Article
Keywords: Email Validation
Created: somnathbanik (26 Apr 2012)
Last edited: hamishwillee (10 Jun 2013)

Contents

Introduction

In this article we will port Login Dialog with validated email input in Qt Quick to Windows Phone. The login page 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

Below you can find how to implement Email Validation app for both Qt and Windows Phone.

Qt

For the Qt implementation, please refer to this article.

Windows Phone

Let’s create an empty Windows Phone project. We add a TextBox to enter email address, a PasswordBox to enter password and a login and cancel Button.

        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
<TextBlock Height="39" HorizontalAlignment="Left" Margin="12,88,0,0" Name="textBlock1" Text="Email" VerticalAlignment="Top" Width="108" FontSize="25"/>
<TextBox InputScope="EmailNameOrAddress" GotFocus="textBoxEmail_GotFocus" LostFocus="textBoxEmail_LostFocus" Height="72" HorizontalAlignment="Right" Margin="0,71,6,0" Name="textBoxEmail" Text="" VerticalAlignment="Top" Width="324" />
<TextBlock Height="37" HorizontalAlignment="Left" Margin="12,165,0,0" Name="textBlock2" Text="Password" VerticalAlignment="Top" FontSize="25" Width="108" />
<PasswordBox MaxLength="10" GotFocus="passwordBox_GotFocus" LostFocus="passwordBox_LostFocus" Height="72" HorizontalAlignment="Left" Margin="126,149,0,0" Name="passwordBox" VerticalAlignment="Top" Width="324" />
<Button Content="Login" Height="72" HorizontalAlignment="Left" Margin="126,276,0,0" Name="buttonLogin" VerticalAlignment="Top" Width="158" Click="buttonLogin_Click" />
<Button Content="Cancel" Height="72" HorizontalAlignment="Right" Margin="0,276,6,0" Name="buttonCancel" VerticalAlignment="Top" Width="160" Click="buttonCancel_Click" />
<TextBlock Height="30" Margin="129,229,17,0" Name="textBlockError" Text="" VerticalAlignment="Top" Foreground="red" Visibility="Collapsed" />
</Grid>

The passwordBox MaxLength property is set to 10, so user can’t type more than 10 characters in the password field. And textBoxEmail InputScope property is set to EmailNameOrAddress, so that we get an email virtual keyboard. textBlockError is used to display if any error occurred during validation. When user click on the Login Button first it checks whether the email field is empty or not, then validates the email address, check password empty field and finally password minimum characters.

private void buttonLogin_Click(object sender, RoutedEventArgs e)
{
//check email field empty or not
if (textBoxEmail.Text != "")
{
//validate email
if (ValidateEmail(textBoxEmail.Text))
{
//check the password empty or not
if(passwordBox.Password != "")
{
if (passwordBox.Password.Length >=minPasswordChar)
{
MessageBox.Show("Successful Login !");
}
else
{
textBlockError.Text = "Password can't be less then " + minPasswordChar + " char !";
passwordBox.BorderBrush = red;
textBlockError.Visibility = Visibility.Visible;
}
}
else{
textBlockError.Text = "Password can't be empty !";
passwordBox.BorderBrush = red;
textBlockError.Visibility = Visibility.Visible;
}
}
else
{
textBlockError.Text = "Invalid email address !";
textBoxEmail.BorderBrush = red;
textBlockError.Visibility = Visibility.Visible;
}
}
else
{
textBlockError.Text = "Email can't be empty !";
textBoxEmail.BorderBrush = red;
textBlockError.Visibility = Visibility.Visible;
}
}

The ValidateEmail() method validates the email and return true if the email is valid.

public static bool ValidateEmail(string str)
{
// Return true if strIn is in valid e-mail format.
return Regex.IsMatch(str, @"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*");
}

To use the method Regex.IsMatch(), we need to add the namespace System.Text.RegularExpressions in the XAML.CS file.

using System.Text.RegularExpressions;

We also use the GotFocus and LostFocus event handler to handle the focus for both PasswordBox and TextBox.

private void passwordBox_GotFocus(object sender, RoutedEventArgs e)
{
passwordBox.BorderBrush = green;
textBlockError.Text = "";
textBlockError.Visibility = Visibility.Collapsed;
}
private void textBoxEmail_GotFocus(object sender, RoutedEventArgs e)
{
textBoxEmail.BorderBrush = green;
textBlockError.Text = "";
textBlockError.Visibility = Visibility.Collapsed;
}

Source Code

This page was last modified on 10 June 2013, at 09:32.
311 page views in the last 30 days.
Nokia Developer aims to help you create apps and publish them so you can connect with users around the world.

京ICP备05048969号  © Copyright Nokia 2013 All rights reserved