Skip to main content
Supported Regions:上海

Form Component Validation: Triggering Mechanism

Form Component Validation: Triggering Mechanism

Overview of Validation Triggering Mechanisms​

WeDa Low-Code Platform supports the following validation triggering mechanisms:

  1. Validation during Input (onChange): Triggers validation in real time as the user types

  2. Validation on Loss of Focus (onBlur): Validation is triggered when the user completes input and moves focus away from the input field

  3. Validation during Submission (onSubmit): Validation is triggered upon form submission

  4. Other Events: Besides the three standard triggering methods mentioned above, custom triggering methods can also be defined

When using the Form Container component, validation is automatically triggered upon submission

How to Configure Validation Triggering Mechanisms​

In the WeDa Low-Code Editor, you can configure the validation triggering methods for input box components by following these steps:

  1. Select the input box component to be configured in the editor
  2. Locate the "Status/Validation" section in the right-hand property panel
  3. Set custom validation rules, which supports using regular expressions
  4. Select the desired triggering method (during input, on loss of focus, or upon submission, using loss of focus triggering as an example)

Applicable Scenarios for Each Triggering Method​

Validation during Input (onChange)​

Applicable Scenarios:

  • Scenarios requiring immediate feedback, such as password strength prompts
  • Real-time prompts for character count limits
  • Scenarios requiring guidance for correct user input

Advantages:

  • Provide immediate feedback
  • Smoother user experience
  • Correct errors before the user completes input

Disadvantages:

  • May frequently trigger validation, increasing system load
  • Less suitable for validation rules that require complete input to evaluate
  • May frequently display error prompts during user input, causing interference

Validation on Loss of Focus (onBlur)​

Applicable Scenarios:

  • Scenarios requiring immediate validation after the user completes input for the current field
  • Scenarios requiring completeness validation for input content
  • Scenarios requiring a balance between ensuring user experience and providing timely feedback

Advantages:

  • Does not interrupt the user's input flow
  • Provide feedback immediately after the user completes input
  • Reduces the frequency of validation triggers, decreasing system load

Disadvantages:

  • Users may need to return to previous fields to correct errors

Validation during Submission (onSubmit)​

Applicable Scenarios:

  • Complex forms scenarios where dependencies exist between multiple fields
  • Scenarios requiring batch validation of all inputs
  • Minimal user disruption scenarios

Advantages:

  • Does not interrupt the user's input flow
  • Reduces the frequency of validation triggers, minimizing system load
  • Suitable for one-time validation of multiple interrelated fields

Disadvantages:

  • Users can only discover errors upon submission.
  • Users may need to backtrack to locate and fix multiple errors

Frequently Asked Questions​

Q1: How to configure multiple validation triggering methods in the same input field?​

A1: In the WeDa Low-Code Platform, you can configure multiple triggering methods using an array format, such as ['onChange', 'onBlur']. This enables validation to trigger both during input entry and when the field loses focus.

Q2: Will the validation triggering method affect form submission?​

A2: Regardless of the validation triggering method you choose, a comprehensive validation will be performed upon form submission. The triggering method primarily affects when validation occurs during the user interaction process.

Q3: How to handle validation that depends on other field values?​

A3: For validations that depend on other field values (e.g., the "confirm password" field must match the "password" field), we recommend performing validation on blur or on submit. In the validation function, obtain the values of the dependent fields and compare them.

Summary​

Selecting appropriate validation triggering methods is crucial for enhancing the form user experience. Through reasonable configuration of validation timing, a balance can be achieved between user-friendliness and data accuracy. In practical applications, different validation triggering methods should be flexibly selected and combined based on specific scenarios and requirements.