
ValidateForm
Form components that can be used for data compliance checks
Data compliance checks are automatically performed when components placed in the ValidateForm
are submitted
Demo
Introduction
ValidateForm
component supports asynchronous setting ofModel
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 theErrorMessage
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 totrue
if you need to check all fields in the model - Set the asynchronous submission form by setting the value of the Button
Button
propertyIsAsync
- 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 changesStateHasChanged
, 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 removeRowType.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
Place the support form components into the ValidateForm
Demo
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
Set the custom error message by calling SetError
method
Demo
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
This component checks the model binding field values within the form by default, setting the ValidateAllProperties
values if you need to check all field values for the model
Demo
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
Supports any complex type of binding and validation
Demo
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','数据库中已存在');
By changing the components within the form, verify that the form can still be validated correctly
Demo
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
Set the alignment of labels throughout the station or in a specific form with style uniformity
Demo
Address text box adds email addressvalidation rules
<EditorItem @bind-Field="@context.Address" ValidateRules="@CustomerRules" />
Add custom validation rules by setting Rules
Demo
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" />
}
call the ValidateForm
instance method Validate
for trigger the form validation
Demo
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;
}
When the focus is in the input box in the form, pressing Enter will automatically submit the form by default. You can disable automatic submission by setting DisableAutoSubmitFormByEnter="false"
Demo
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
Attributes
Methods
B station related video link
交流群