From dcf9da182eb03a20bc4a80cd6fe38f079ffabf84 Mon Sep 17 00:00:00 2001 From: Sergey Vinogradov Date: Wed, 2 Oct 2024 17:24:53 +0400 Subject: [PATCH] improve validation section for NumberField --- articles/components/date-picker/index.adoc | 2 +- articles/components/number-field/index.adoc | 31 +++++++++++++++++++-- articles/components/text-field/index.adoc | 1 + 3 files changed, 30 insertions(+), 4 deletions(-) diff --git a/articles/components/date-picker/index.adoc b/articles/components/date-picker/index.adoc index 9343d6c9e6..8847b2260e 100644 --- a/articles/components/date-picker/index.adoc +++ b/articles/components/date-picker/index.adoc @@ -92,8 +92,8 @@ endif::[] -- It's important to ensure an appropriate error message is configured for each constraint violation to provide users with clear feedback. - ifdef::flow,lit[] + === Custom Validation For more complex cases where constraint validation isn't enough, Flow and Hilla offer the Binder API that allows you to define custom validation rules. This is useful, for example, when you want to limit the options to Monday through Friday. In the following example, try selecting a date that's on a Sunday or a Saturday to see a custom validation message. diff --git a/articles/components/number-field/index.adoc b/articles/components/number-field/index.adoc index 2038316314..538c0a4683 100644 --- a/articles/components/number-field/index.adoc +++ b/articles/components/number-field/index.adoc @@ -74,11 +74,31 @@ include::{root}/frontend/demo/component/numberfield/react/number-field-step-butt endif::[] -- -== Minimum and Maximum Value +[.collapsible-list] +== Validation -The valid input range of a Number Field is set by defining the minimum and maximum values. +Number Field provides a validation mechanism based on constraints. Constraints allow you to define criteria that the value must meet to be considered valid. Validation typically occurs when the user initiates a value change, for example by entering input and pressing kbd:[Enter]. If the value is invalid, the field is visually highlighted in red, and an error message appears underneath the input. -You can set the helper text to give information about the range. +Below is a list of supported constraints with more detailed information: + +[.example] + +include::{articles}/components/_input-field-common-features.adoc[tags=bad-input;required] + +[#min-and-max-value] +.Min & Max Value +[%collapsible] +==== +The valid input range of a Number Field can be restricted by defining `min` and `max` values. Helper text can be used to inform the user about the accepted range. +==== + +.Step +[%collapsible] +==== +Refer to the <<#step,Step>> section for more details and an example. +==== + +The following example demonstrates how to create a quantity field using a combination of these constraints: [.example] -- @@ -105,6 +125,11 @@ include::{root}/frontend/demo/component/numberfield/react/number-field-validatio endif::[] -- +It's important to ensure an appropriate error message is configured for each constraint violation to provide users with clear feedback. + +include::{articles}/components/_input-field-common-features.adoc[tags=binder] + + == Step The step value of a Number Field defines the numeric intervals that are allowed. diff --git a/articles/components/text-field/index.adoc b/articles/components/text-field/index.adoc index eeb4392768..21895c6807 100644 --- a/articles/components/text-field/index.adoc +++ b/articles/components/text-field/index.adoc @@ -112,6 +112,7 @@ It's important to ensure an appropriate error message is configured for each con include::{articles}/components/_input-field-common-features.adoc[tags=binder] + // Readonly and disabled include::{articles}/components/_input-field-common-features.adoc[tag=readonly-and-disabled]