×
Namespaces

Variants
Actions

Login Dialog with validated email input in Qt and Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

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

WP Metro Icon Porting.png
SignpostIcon XAML 40.png
WP Metro Icon WP8.png
SignpostIcon WP7 70px.png
Article Metadata
Code ExampleTested 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
Windows Phone 8
Windows Phone 7.5
Platform Security
Signing Required: Self-Signed
Article
Keywords: Email Validation
Created: somnathbanik (26 Apr 2012)
Last edited: hamishwillee (27 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 27 June 2013, at 08:07.
224 page views in the last 30 days.
×