Create and Validate a Login Form in .NET MAUI
Tags: netmaui, mobile, ui
Published: 2023-05-08 15:59:57

---
title: Create and Validate a Login Form in .NET MAUI
published: true
date: 2023-05-08 11:28:32 UTC
tags: netmaui, mobile, ui
canonical_url: https://www.syncfusion.com/blogs/post/login-form-in-net-maui.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8aqw9e5wh55p2prmw88t.png
---
A login form allows users to enter their credentials, such as an email address and password, to authenticate and gain access to a website or application.

The [.NET MAUI DataForm](https://www.syncfusion.com/maui-controls/maui-dataform ".NET MAUI DataForm") can be used to create various data forms. In this blog, I will explain how to develop and validate a login data form using the .NET MAUI DataForm.

## Initialize the data from the control

1. Create a new [.NET MAUI application in Visual Studio](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?view=net-maui-7.0&tabs=vswin&pivots=devices-android "Create a .NET MAUI application in Visual Studio").
2. Syncfusion [.NET MAUI components](https://www.syncfusion.com/maui-controls "Syncfusion .NET MAUI controls") are available at [nuget.org](https://www.nuget.org/ "NuGet Gallery"). To add the SfDataForm to your project, open the NuGet package manager in Visual Studio, search for [Syncfusion.Maui.DataForm](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.html "Syncfusion.Maui.DataForm Class"), and then install it.
3. To initialize the control, import the control namespace [Syncfusion.Maui.DataForm](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.html "Syncfusion.Maui.DataForm Class") in XAML or C# code and initialize the [DataForm](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.SfDataForm.html "SfDataForm Class").

Refer to the following code to initialize the .NET MAUI DataForm.

**MainPage.xaml**

```xml
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm"
<dataForm:SfDataForm x:Name="loginForm"/>
```

Register the **ConfigureSyncfusionCore** handler for Syncfusion core in the **MauiProgram.cs** file.

**MauiProgram.cs**

```csharp
using Syncfusion.Maui.Core.Hosting;
public static class MauiProgram
{
   public static MauiApp CreateMauiApp()
   {
      var builder = MauiApp.CreateBuilder();
      builder.ConfigureSyncfusionCore();
      builder.ConfigureSyncfusionCore();
   }
}
```

## Create login data from the model

Create a login form with the following fields to get email addresses and passwords.

**LoginFormModel.cs**

```csharp
public class LoginFormModel
{
    [Display(Prompt = "example@mail.com", Name = "Email")]
    public string Email{ get; set; }
    
    [Display(Name = "Password")]
    [DataType(DataType.Password)]
    public string Password { get; set; }
}
```

## Create login form editors

By default, the data form auto-generates the [data editors](https://help.syncfusion.com/maui/dataform/editors "Data editors in .NET MAUI DataForm control") based on primitive data types such as **string** , **enumeration** , **DateTime** , and **TimeSpan** in the [DataObject](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.SfDataForm.html#Syncfusion_Maui_DataForm_SfDataForm_DataObject "DataObject property of .NET MAUI DataForm control") property.

You can change the editor layout default (label and editor) and floating label layout using the [LayoutType](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.SfDataForm.html#Syncfusion_Maui_DataForm_SfDataForm_LayoutType "LayoutType property of .NET MAUI DataForm control") property.

Refer to the following code example. In it, we set the data form model ( **LoginFormModel** ) to the  **DataObject**  property from the view model class to create the data editors for the login form with a floating label layout.

Please refer to the code to bind the **LoginFormModel** property from the **DataFormViewModel** class.

**MainPage.xaml**

```xml
...
<ContentPage.BindingContext>
 <local:DataFormViewModel/>
</ContentPage.BindingContext>
<dataForm:SfDataForm x:Name="loginForm" DataObject="{Binding LoginFormModel}" LayoutType="TextInputLayout" />
```

Refer to the code to initialize the **LoginFormModel** property.

**DataFormViewModel.cs**

```csharp
public class DataFormViewModel
{
    /// <summary>
    /// Initializes a new instance of the <see cref="DataFormViewModel" /> class.
    /// </summary>
    public DataFormViewModel()
    {
       this.LoginFormModel = new LoginFormModel();
    }
    
    /// <summary>
    /// Gets or sets the login form model.
    /// </summary>
    public LoginFormModel LoginFormModel { get; set; }
}
```

## Design the login form page

Let’s design the login page with images, buttons, checkboxes, and labels. 

Refer to the following code to add an image to the login form.

**MainPage.xaml**

```xml
<Border Grid.ColumnSpan="{OnIdiom Default=2, Desktop=1}" Stroke="Transparent" Background="{OnIdiom Phone=#83E9EE,Desktop=Transparent}" Grid.RowSpan="{OnIdiom Default=1, Desktop=2}">
 <Border.StrokeShape>
  <RoundRectangle CornerRadius="0,0,100,100"/>
 </Border.StrokeShape>
 <Image Source="login.png" Grid.Row="0" Grid.Column="0" HorizontalOptions="Center" Aspect="AspectFit"/>
</Border>
```

Next, add the **Remember Me** checkbox and **Forgot password** label in the login form.

**MainPage.xaml**

```xml
<Grid ColumnDefinitions="0.5*,0.5*" Grid.Row="2" Padding="12,0,0,0" VerticalOptions="Start">
 <HorizontalStackLayout VerticalOptions="Center" Padding="10,0,0,0" >
  <CheckBox Color="{StaticResource Primary}"/>
  <Label Text="Remember me" FontSize="12" VerticalOptions="Center" />
 </HorizontalStackLayout>
 <Label Text="Forgot password?" Grid.Column="1" TextColor="{StaticResource Primary}" HorizontalTextAlignment="Center" Padding="10,0,0,0" FontSize="12" VerticalOptions="Center" />
</Grid>
```

Then, add the **LOGIN** button in the login form.

**MainPage.xaml**

```xml
<Button Text="LOGIN" x:Name="loginButton" HeightRequest="40" VerticalOptions="End"
        HorizontalOptions="Fill" Margin="20,0,20,0" CornerRadius="10"
        Padding="0" FontAttributes="Bold"
        Grid.Row="3" Background="{StaticResource Primary}"/>
```

Next, refer to the following code to add the **Don’t have an account? Sign Up** label in the login form. You can refer to [this blog for how to create a signup form](https://www.syncfusion.com/blogs/post/create-validate-sign-up-form-in-dotnet-maui.aspx "Blog: Create and Validate a Sign-Up Form in .NET MAUI").

**MainPage.xaml**

```xml
<Label Grid.Row="4" Padding="0,12,0,0" HorizontalOptions="Center" HorizontalTextAlignment="Center" FontSize="14"> 
 <Label.FormattedText>
  <FormattedString>
    <Span Text="Don't have an account? " />
    <Span Text="Sign Up" TextDecorations="Underline" TextColor="{StaticResource Primary}"/>
  </FormattedString>
 </Label.FormattedText>
</Label>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/NET-MAUI-login-form-on-the-desktop.png" alt=".NET MAUI login form on the desktop" style="width:100%">

  <figcaption>.NET MAUI login form on the desktop</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/NET-MAUI-login-form-on-the-phone.png" alt=".NET MAUI login form on the phone" style="width:100%">

  <figcaption>.NET MAUI login form on the phone</figcaption>

</figure>

## Change the keyboard for the email editor

Use the email field keyboard by updating the [keyboard](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.DataFormTextEditorItem.html#Syncfusion_Maui_DataForm_DataFormTextEditorItem_Keyboard "Keyboard property of .NET MAUI DataForm control") property in the [GenerateDataFormItem](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.SfDataForm.html#Syncfusion_Maui_DataForm_SfDataForm_GenerateDataFormItem "GenerateDataFormItem method of .NET MAUI DataForm control") event.

Refer to the following code to change the keyboard for the email editor.

**MainPage.xaml**

```xml
<ContentPage.Behaviors>
 <local:LoginFormBehavior/>
</ContentPage.Behaviors>
```

**LoginFormBehavior.cs**

```csharp
this.dataForm = bindable.FindByName<SfDataForm>("loginForm");
          
this.dataForm.GenerateDataFormItem += this.OnGenerateDataFormItem;
private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormItem != null && e.DataFormItem.FieldName == nameof(LoginFormModel.Email) && e.DataFormItem is DataFormTextEditorItem textItem)
    {
       textItem.Keyboard = Keyboard.Email;
    }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Email-keyboard-for-the-email-editor.png" alt="Email keyboard for the email editor" style="width:100%">

  <figcaption>Email keyboard for the email editor</figcaption>

</figure>

## Validate the login form

The email address and password fields must not be empty. If either field is left blank or has invalid data, an error message will be displayed, and the user cannot submit the form.

Please refer to the code to add [EmailAddress](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.emailaddressattribute?view=net-7.0 "EmailAddressAttribute Class") and [Required](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-7.0 "RequiredAttribute Class") validation attributes.

**LoginFormModel.cs**

```csharp
public class LoginFormModel
{
   [Display(Prompt = "example@mail.com", Name = "Email")]
   [EmailAddress(ErrorMessage = "Enter your email - example@mail.com")]
   public string Email { get; set; }
        
   [Display(Name = "Password")]
   [DataType(DataType.Password)]
   [Required(ErrorMessage = "Enter the password")]
   public string Password { get; set; }
}
```

The data form supports validating the data by using the [ValidationMode](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.SfDataForm.html#Syncfusion_Maui_DataForm_SfDataForm_ValidationMode "ValidationMode property of .NET MAUI DataForm") property.

Refer to the following code to set the validation mode to [PropertyChanged](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.DataFormValidationMode.html#Syncfusion_Maui_DataForm_DataFormValidationMode_PropertyChanged "PropertyChanged field of .NET MAUI DataForm"); the value will be validated immediately when changed.

**MainPage.xaml**

```xml
<dataForm:SfDataForm x:Name="loginForm" LayoutType="TextInputLayout" Grid.Row="1" DataObject="{Binding LoginFormModel}" ValidationMode="PropertyChanged" >
 <ContentPage.Behaviors>
  <local:LoginFormBehavior/>
 </ContentPage.Behaviors>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Validate-the-login-form-on-data-being-changed-on-the-desktop.png" alt="Validate the login form on data being changed on the desktop" style="width:100%">

  <figcaption>Validate the login form on data being changed on the desktop</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Validate-the-login-form-on-data-being-changed-in-the-phone.png" alt="Validate the login form on data being changed on the phone" style="width:100%">

  <figcaption>Validate the login form on data being changed in the phone</figcaption>

</figure>

Login form validation can be handled while submitting the login button using the [**Validate** method](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataForm.SfDataForm.html#Syncfusion_Maui_DataForm_SfDataForm_Validate "Validate method of .NET MAUI DataForm").

**LoginFormBehavior.cs**

```csharp
private async void OnLoginButtonCliked(object sender, EventArgs e)
{
   if(this.dataForm != null && App.Current?.MainPage != null)
   {
     if(this.dataForm.Validate())
     {
        await App.Current.MainPage.DisplayAlert("", "Signed in successfully", "OK");
     }
     else
     {
        await App.Current.MainPage.DisplayAlert("", "Please enter the required details", "OK");
     }
   }
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Validate-the-login-form-on-the-LOGIN-button-being-clicked-on-the-desktop.png" alt="Validate the login form on the LOGIN button being clicked on the desktop" style="width:100%">

  <figcaption>Validate the login form on the LOGIN button being clicked on the desktop</figcaption>

</figure>

<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/05/Validate-the-login-form-on-the-LOGIN-button-being-clicked-on-the-phone.png" alt="Validate the login form on the LOGIN button being clicked on the phone" style="width:100%">

  <figcaption>Validate the login form on the LOGIN button being clicked on the phone</figcaption>

</figure>

## GitHub reference

Refer to the [GitHub demo](https://github.com/SyncfusionExamples/create-the-login-form-using-.NET-MAUI-DataForm "Create and validate a login form using .NET MAUI DataForm GitHub demo") on this topic.

## Conclusion

Thanks for reading. This blog demonstrated how to create and validate a login form using the [.NET MAUI DataForm](https://www.syncfusion.com/maui-controls/maui-dataform ".NET MAUI DataForm") control. Try out the steps in this blog and leave your feedback in the comments section below.

For current Syncfusion customers, the newest version of Essential Studio is available from the [license and downloads page](https://www.syncfusion.com/account/downloads "Essential Studio license and downloads page"). If you are not a customer, try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Essential Studio Products") to check out these new features. If you have questions, contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"). We are always happy to assist you!

## Related Blogs

- [Simplify Data Visualization with Multi-Axis Charts in .NET MAUI](https://www.syncfusion.com/blogs/post/simplify-data-visualization-with-multi-axis-charts-in-net-maui.aspx "Blog: Simplify Data Visualization with Multi-Axis Charts in .NET MAUI")
- [Building a Hijri Calendar with .NET MAUI Scheduler: A Beginner’s Guide](https://www.syncfusion.com/blogs/post/building-a-hijri-calendar-with-net-maui-scheduler-a-beginners-guide.aspx "Blog: Building a Hijri Calendar with .NET MAUI Scheduler: A Beginner’s Guide")
- [Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control](https://www.syncfusion.com/blogs/post/dotnet-maui-shimmer-control.aspx "Blog: Elevate Your App’s User Experience with the New .NET MAUI Shimmer Control")
- [Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio](https://www.syncfusion.com/blogs/post/dotnet-maui-template-studio.aspx "Blog: Streamline MAUI Projects with the Syncfusion .NET MAUI Template Studio")