diff options
| -rw-r--r-- | documentation/articles/MarkRequiredFieldsAsSuch.asciidoc | 40 | ||||
| -rw-r--r-- | documentation/articles/contents.asciidoc | 1 | ||||
| -rw-r--r-- | documentation/articles/img/errortooltip.png | bin | 0 -> 12613 bytes | |||
| -rw-r--r-- | documentation/articles/img/reqfield.png | bin | 0 -> 10837 bytes |
4 files changed, 41 insertions, 0 deletions
diff --git a/documentation/articles/MarkRequiredFieldsAsSuch.asciidoc b/documentation/articles/MarkRequiredFieldsAsSuch.asciidoc new file mode 100644 index 0000000000..c80132db2c --- /dev/null +++ b/documentation/articles/MarkRequiredFieldsAsSuch.asciidoc @@ -0,0 +1,40 @@ +[[mark-required-fields-as-such]] +Mark required fields as such +---------------------------- + +Don’t make your users guess which fields in your form are required. Mark +them as such: + +[source,java] +.... +TextField tfFirstName = new TextField("First name"); +tfFirstName.setRequired(true); +tfFirstName.setRequiredError("First name must be filled in!"); +.... + +Required fields get a small *asterisk* after the caption (or after the +field itself, if it doesn’t have a caption), which is quite universally +understood to mean “required”. Of course, it certainly doesn’t hurt to +have “footnote” somewhere in your form that explains it anyway. + +image:img/reqfield.png[Required field with asterisk] + +Marking a field as required also implicitly adds a non-empty validator +to the field, preventing the form from being submitted unless a value +has been entered. The error message associated with that validator can +be set with the *setRequiredError()* method: + +[source,java] +.... +TextField tfFirstName = new TextField("First name"); +tfFirstName.setRequired(true); +tfFirstName.setRequiredError("First name must be filled in!"); +.... + +image:img/errortooltip.png[Required field with error] + +Think carefully about which fields really are required, though. For +instance, asking unnecessary questions in a sign-up form has a tendency +to make people either cancel signing up, or enter nonsense information +in fields they deem nonessential. Only mark as required fields that you +really need the user to fill in, right there and then. diff --git a/documentation/articles/contents.asciidoc b/documentation/articles/contents.asciidoc index dfc2790ffe..24f563e5c3 100644 --- a/documentation/articles/contents.asciidoc +++ b/documentation/articles/contents.asciidoc @@ -67,5 +67,6 @@ are great, too. - link:UseTooltipsToClarifyFunctions.asciidoc[Use tooltips to clarify functions] - link:EnableAndDisableButtonsToIndicateState.asciidoc[Enable and disable buttons to indicate state] - link:ChangingThemeOnTheFly.asciidoc[Changing theme on the fly] +- link:MarkRequiredFieldsAsSuch.asciidoc[Mark required fields as such] - link:CreatingAUIExtension.asciidoc[Creating a UI extension] - link:CreatingAThemeUsingSass.asciidoc[Creating a theme using Sass] diff --git a/documentation/articles/img/errortooltip.png b/documentation/articles/img/errortooltip.png Binary files differnew file mode 100644 index 0000000000..730058c554 --- /dev/null +++ b/documentation/articles/img/errortooltip.png diff --git a/documentation/articles/img/reqfield.png b/documentation/articles/img/reqfield.png Binary files differnew file mode 100644 index 0000000000..498ac5df1f --- /dev/null +++ b/documentation/articles/img/reqfield.png |
