Data Validation in .NET MAUI DataForm (SfDataForm)

5 Jun 20239 minutes to read

The data form validates the data and user input to update the correct value in the underlying data object. In invalid data, the error message is shown at the bottom of the editor.

Built in validations

The supported built in validations are as follows:

Data annotations

Validate the data using data annotation attributes.

The String type property is validated using the Required and StringLength attributes.

[Required(AllowEmptyStrings = false, ErrorMessage = "Name should not be empty")]
[StringLength(15, ErrorMessage = "Name should not exceed 15 characters")]
public string Name { get; set; }

Refer here to know more about data annotations in DataForm.

Date range attribute

Validate the date time value using the date range attribute.

[DataType(DataType.Date)]
[DataFormDateRange(MinimumDate = "01/01/2022", MaximumDate = "31/12/2022", ErrorMessage = "Join date is invalid")]
public DateTime JoinDate { get; set; }

Refer here to know more about date range attribute in DataForm.

Validation mode

The ValidationMode determines when the value should be validated.

The supported validation modes are as follows:

  • LostFocus
  • PropertyChanged
  • Manual
<ContentPage 
...
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
    <dataForm:SfDataForm
        x:Name="dataForm" 
        ValidationMode="LostFocus">
    </dataForm:SfDataForm>
</ContentPage>
SfDataForm dataForm = new SfDataForm();
this.dataForm.ValidationMode = DataFormValidationMode.LostFocus;
this.Content = dataForm;

LostFocus

If the validation mode is LostFocus, the value will be validated when the editor loses its focus. By default, the ValidationMode is LostFocus.

PropertyChanged

If the validation mode is PropertyChanged, the value will be validated immediately when it is changed.

Manual

If the validation mode is Manual, the value should be validated manually by calling the SfDataForm.Validate or SfDataForm.Validate(new List()) method.

The following code validates the value of all the properties in the data object:

this.dataForm.Validate();

To validate the specific list of property value, pass the property names as argument.

this.dataForm.Validate(new List<string>() {"FirstName", "Age" });

Determine whether the data form or property is valid by using the Validate method.

bool isValid = this.dataForm.Validate();

List<string> propertyNames = new List<string>();
propertyNames.Add("FirstName");
bool isPropertyValid = this.dataForm.Validate(propertyNames);

If the data form or property is valid, true will be returned. Or else false will be returned.

Error message in .NET MAUI DataForm.

NOTE

View sample in GitHub

Valid message

If the values are correct, show the ValidMessage like an error message, the valid message will also be displayed at the bottom of the editor.

[DataFormDisplayOptions(ValidMessage = "Password strength is good")]
[Required(ErrorMessage = "Please enter the password")]
[RegularExpression(@"^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z\d]{8,}$", ErrorMessage = "A minimum 8-character password should contain a combination of uppercase and lowercase letters.")]
public string Password { get; set; }

Valid message in .NET MAUI DataForm.

Validate the data form

Get the validation details of all the editors of the data form using the ValidateForm event of the data form.

NOTE

This event will be raised once after the manual validation call using the SfDataForm.Validate() method.

this.dataForm.ValidateForm += this.OnDataFormValidateForm;

private void OnDataFormValidateForm(object sender, DataFormValidateFormEventArgs e)
{
    object dataObject = e.DataObject;
    var values = e.NewValues;
    var errorMessage = e.ErrorMessage;
}

Validate the specific editor

The ValidateProperty event allows you to validate specific editors in the data form. Set IsValid, ErrorMessage, and ValidMessage of the DataFormValidatePropertyEventArgs.

this.dataForm.ValidateProperty += this.OnDataFormValidateProperty;

private void OnDataFormValidateProperty(object sender, DataFormValidatePropertyEventArgs e)
{
    bool isValid = e.IsValid;
    string propertyName = e.PropertyName;
    object newValue = e.NewValue;
    object currentValue = e.CurrentValue;
    string errorMessage = e.ErrorMessage;
    string validMessage = e.ValidMessage;
}

Validation label appearance customization

The data form supports customizing the style of both error and valid message label style easily.

Customize error label text style

The error label style can be customized by changing the ErrorLabelTextStyle property of the SfDataForm.

<ContentPage 
...
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
    <dataForm:SfDataForm
        x:Name="dataForm">
        <dataForm:SfDataForm.ErrorLabelTextStyle>
            <dataForm:DataFormTextStyle FontSize="10" FontAttributes="Italic" TextColor="Violet" FontFamily="Roboto"/>
        </dataForm:SfDataForm.ErrorLabelTextStyle>
    </dataForm:SfDataForm>
</ContentPage>

Also, customize the error label style for each editor using the ErrorLabelTextStyle property of the DataFormItem.

SfDataForm dataForm = new SfDataForm();
dataForm.GenerateDataFormItem += OnGenerateDataFormItem;
this.Content = dataForm;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.FieldName == "FirstName")
        {
            e.DataFormItem.ErrorLabelTextStyle = new DataFormTextStyle
            {
                TextColor = Colors.DarkSeaGreen,
                FontSize = 8,
                FontAttributes = FontAttributes.Italic,
                FontFamily = "Roboto",
            };
        }
    }
}

Error message style in .NET MAUI DataForm.

Customize valid message label text style

The valid message label style can be customized by changing the ValidMessageLabelTextStyle property of the SfDataForm.

<ContentPage 
...
xmlns:dataForm="clr-namespace:Syncfusion.Maui.DataForm;assembly=Syncfusion.Maui.DataForm">
    <dataForm:SfDataForm
        x:Name="dataForm">
        <dataForm:SfDataForm.ValidMessageLabelTextStyle>
            <dataForm:DataFormTextStyle FontSize="10" FontAttributes="Italic" TextColor="Violet" FontFamily="Roboto"/>
        </dataForm:SfDataForm.ValidMessageLabelTextStyle>
    </dataForm:SfDataForm>
</ContentPage>

Also, customize the valid message label style for each editor using the ValidMessageLabelTextStyle property of the DataFormItem.

SfDataForm dataForm = new SfDataForm();
this.dataForm.GenerateDataFormItem += OnGenerateDataFormItem;
this.Content = dataForm;

private void OnGenerateDataFormItem(object sender, GenerateDataFormItemEventArgs e)
{
    if (e.DataFormItem != null)
    {
        if (e.DataFormItem.FieldName == "FirstName")
        {
            e.DataFormItem.ValidMessageLabelTextStyle = new DataFormTextStyle
            {
                TextColor = Colors.DarkSeaGreen,
                FontSize = 8,
                FontAttributes = FontAttributes.Italic,
                FontFamily = "Roboto",
            };
        }
    }
}

Valid message style in .NET MAUI DataForm.