Login Dialog with validated email input in Qt and WP7
This article demonstrates how to create a Login Page with validated email input in Qt and WP7.
Article Metadata
Code Example
Tested with
Compatibility
Platform Security
Article
Contents |
Introduction
In this article we will port Login Dialog with validated email input in Qt Quick to WP7. 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
Login Page
Email validation Error
Implementation
Below you can find how to implement Email Validation app for both Qt and WP7.
Qt
For the Qt implementation, please refer to this article.
WP7
Let’s create an empty WP7 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
- The full source code of the example is available here: File:LoginDialogWP7.zip
(no comments yet)