Introduction

• ValidateForm component supports asynchronous setting of Model values
• The form event is for OnValidSubmit OnInvalidSubmit
• Model parameter is required is not allowed to be empty
• Multiple buttons can be placed within the form to set whether the ButtonType='ButtonType.Submit' parameter is submitted to the form
• The client authentication mechanism supports the model's Required label, setting the default English prompt information when not set by setting the ErrorMessage parameter prompt
• The form checks by default whether the binding field values within the form are legitimate, and you can set the ValidateAllProperties property value to true if you need to check all fields in the model
• Set the asynchronous submission form by setting the value of the Button Button property IsAsync
• After the value of the component control in the form is modified, the OnFieldChanged method is called

Note:

• Components within a form are typically used to bind the property values of Model in both directions using bidirectional binding techniques, causing the component to refresh and re-render when its value changes StateHasChanged, and the method is called, i.e. its component or page is refreshed and re-rendered
• The default width of component front label is 120px. If you need more, please change the style variable --bb-row-label-width in the project style file or remove RowType.Inline

In this example, set the ShowLabelTooltip in the form-inline style to true to make the mouse hover over the cropped label to display the complete information

Examples of components that support form validation

Example illustration

• The name is the string type
• The age is an integer type
• Birthday is the datetime type
• Education is an enumeration type
• Hobbies are collection types

In this example, by setting the submit button property IsAsync to submit the form asynchronously, click Submit to disable itself, and resume after the asynchronous operation is complete

Scenario

the client verification after the pass of the database save operation, if other problems, you can still make a form custom error prompt, in this case, after the data verification is legal, click the submit form button, the name field will show, the database already exists such a custom prompt

The Address is not placed in this example, because the ValidateAllProperties parameter value is true, the Addres field is still checked, and OnInvalidSubmit is triggered when the data is submitted after all the data in the timely form is legitimate callback delegate

The second binding in this example is a super-complex type ComplexModel.Dummy.Dummy2.Name Empty the value, click submit the formvalidate the data. After the second text box verifies compliance, the error prompt is displayed again by calling the SetError

ComplexForm.SetError('Dummy.Dummy2.Name','数据库中已存在');

Click the Change componentbutton address The component changes to count components, reset componentbutton recovery, name address component is required, count The component has a default value of 0 So you can check through the data

Address text box adds email addressvalidation rules

<EditorItem @bind-Field="@context.Address" ValidateRules="@CustomerRules" />

Address text box adds email addressverification rules, click On Submission to verify

protected override void OnInitialized()
{
    base.OnInitialized();
    // Add mailbox validation rules
    CustomerRules.Add(new CustomerValidator(new EmailAddressAttribute()));

    // Used in Razor files
    // <BootstrapInput @bind-Value="@Model.Address" ValidateRules="@CustomerRules" />
}

The button is not submit button. so not trigger the form submit action, in this sample code use OnClickWithoutRender parameter for improve performance.

[NotNull]
private ValidateForm? ValidatorForm { get; set; }

private Task OnClickValidate()
{
    ValidatorForm.Validate();
    return Task.CompletedTask;
}

form form is an important element ofweb. If there is an input element in the form, when this element gets the focus, pressing Enter will automatically submit the form. This is a feature of the form element, not our component code logic. If this function is not needed, disable it by setting DisableAutoSubmitFormByEnter="true", In this example, pressing Enter in the text box will not automatically submit and perform data compliance check. You need to click the Submit button to submit the form