summaryrefslogtreecommitdiffstats
path: root/documentation/articles
diff options
context:
space:
mode:
authorErik Lumme <erik@vaadin.com>2017-09-13 10:51:21 +0300
committerErik Lumme <erik@vaadin.com>2017-09-13 10:51:21 +0300
commitc413e16ff3e3b86e1914c5ebb13e4a6e1f1bfb29 (patch)
tree16bd6aa0798b9bd6f15ade12f09c29537574415f /documentation/articles
parent3455f93e28e9e90f14399fa39645f4614634a53a (diff)
downloadvaadin-framework-c413e16ff3e3b86e1914c5ebb13e4a6e1f1bfb29.tar.gz
vaadin-framework-c413e16ff3e3b86e1914c5ebb13e4a6e1f1bfb29.zip
Migrate MarkRequiredFieldsAsSuch
Diffstat (limited to 'documentation/articles')
-rw-r--r--documentation/articles/MarkRequiredFieldsAsSuch.asciidoc40
-rw-r--r--documentation/articles/contents.asciidoc1
-rw-r--r--documentation/articles/img/errortooltip.pngbin0 -> 12613 bytes
-rw-r--r--documentation/articles/img/reqfield.pngbin0 -> 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
new file mode 100644
index 0000000000..730058c554
--- /dev/null
+++ b/documentation/articles/img/errortooltip.png
Binary files differ
diff --git a/documentation/articles/img/reqfield.png b/documentation/articles/img/reqfield.png
new file mode 100644
index 0000000000..498ac5df1f
--- /dev/null
+++ b/documentation/articles/img/reqfield.png
Binary files differ