Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 54 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,59 @@
# Blazor Hybrid App Custom Form Validation
This project illustrates that get employee details in a Blazor Hybrid app and added form validator with Syncfusion components.
# Blazor Hybrid App with Custom Form Validation

A comprehensive sample demonstrating how to build a customer registration form in a Blazor Hybrid application using [Blazor components](https://www.syncfusion.com/blazor-components) with client-side validation and cross-platform support.

## Overview

This sample application showcases best practices for building forms in [Blazor Hybrid Apps (.NET MAUI)](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app). It provides a complete working example of:

- Customer registration form with multiple input types (text, date, dropdown)
- Client-side form validation using data annotations
- Blazor components integrated with .NET MAUI
- Form submission handling

The sample uses a fictitious employee details scenario to demonstrate real-world form validation patterns including field requirements, string length constraints, email validation, phone number validation, and password confirmation.

## Features

- **Blazor Components** - Uses SfTextBox, SfDatePicker, SfComboBox, and SfButton for a polished UI
- **Data Annotations Validation** - Built-in .NET validation attributes for required fields, string length, email, and phone number patterns
- **Cross-Platform** - Supports Windows, iOS, macOS, and Android platforms
- **Responsive Design** - Bootstrap-based responsive layout
- **Password Validation** - Compare validator for password confirmation

## Prerequisites

* Visual Studio 2022
- [.NET SDK 8.0](https://dotnet.microsoft.com/download/dotnet/8.0) or later
- [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) or later
- [Visual Studio Code](https://code.visualstudio.com/)

## Getting Started

### Clone the repository

```bash
git clone https://github.com/SyncfusionExamples/blazor-hybrid-app-custom-form-validation.git
cd blazor-hybrid-app-custom-form-validation
```

### Run with Visual Studio

1. Open the solution file using Visual Studio 2022 or later.
2. Restore the NuGet packages by rebuilding the solution.
3. Build the project to ensure there are no compilation errors.
4. Run the project.

### Run with .NET CLI

```bash
# Restore dependencies
dotnet restore

# Run the project
dotnet run
```

## How to run the project
## References

* Checkout this project to a location in your disk.
* Open the solution file using the Visual Studio 2022.
* Restore the NuGet packages by rebuilding the solution.
* Run the project.
- [.NET MAUI Documentation](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app)
- [Blazor Form Validation](https://learn.microsoft.com/en-us/aspnet/core/blazor/forms-validation)