public/uploads/rules/forms do-you-indicate-which-fields-are-required-and-validate-them/rule (PR from TinaCMS)

categories/design/rules-to-better-interfaces-forms.mdx

@@ -11,8 +11,13 @@ index:
   - rule: public/uploads/rules/avoid-clutter-in-form-labels/rule.mdx
   - rule: public/uploads/rules/label-buttons-consistently/rule.mdx
   - rule: public/uploads/rules/use-the-specific-action-as-labels/rule.mdx
+  - rule: public/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/rule.mdx
+  - rule: public/uploads/rules/use-adaptive-placeholders-on-your-forms/rule.mdx
+  - rule: public/uploads/rules/avoid-using-mailto-on-your-website/rule.mdx
   - rule: public/uploads/rules/user-authentication-terms/rule.mdx
   - rule: public/uploads/rules/do-you-have-a-label-tag-for-the-fields-associated-with-your-input/rule.mdx
+  - rule: public/uploads/rules/forms-do-you-include-the-number-of-results-in-comboboxes/rule.mdx
+  - rule: public/uploads/rules/create-a-combo-box-that-has-a-custom-template/rule.mdx
   - rule: public/uploads/rules/do-you-align-your-add-edit-delete-buttons-horizontal-and-bottom-right/rule.mdx
   - rule: public/uploads/rules/do-you-avoid-data-junk-data-not-manually-entered-by-yourself/rule.mdx
   - rule: public/uploads/rules/do-you-avoid-combining-different-entities/rule.mdx
@@ -39,7 +44,17 @@ index:
   - rule: public/uploads/rules/do-you-use-the-concept-of-drafts/rule.mdx
   - rule: public/uploads/rules/do-you-know-how-to-arrange-forms/rule.mdx
   - rule: public/uploads/rules/survey-other-vs-na/rule.mdx
-  - rule: public/uploads/rules/avoid-using-mailto-on-your-website/rule.mdx
+  - rule: public/uploads/rules/do-you-use-predictive-textboxes-instead-of-normal-combo-or-text-boxes/rule.mdx
+  - rule: public/uploads/rules/do-you-use-the-correct-input-type/rule.mdx
+  - rule: public/uploads/rules/do-you-avoid-having-reset-buttons-on-webforms/rule.mdx
+  - rule: public/uploads/rules/control-choice-do-you-know-when-to-use-checkboxes/rule.mdx
+  - rule: public/uploads/rules/control-choice-do-you-use-checked-list-boxes-instead-of-multi-select-list-boxes/rule.mdx
+  - rule: public/uploads/rules/controls-do-you-disable-buttons-that-are-unavailable/rule.mdx
+  - rule: public/uploads/rules/controls-do-you-make-option-groups-and-check-boxes-simple-to-understand/rule.mdx
+  - rule: public/uploads/rules/consistent-fields-and-data/rule.mdx
+  - rule: public/uploads/rules/do-you-use-an-ellipsis-to-indicate-an-action-requiring-more-user-input/rule.mdx
+  - rule: public/uploads/rules/controls-do-you-include-a-select-all-checkbox-on-the-top/rule.mdx
+  - rule: public/uploads/rules/control-choice-do-you-use-comboboxes-instead-of-single-select-list-boxes/rule.mdx
 _template: category
 ---
 

categories/design/rules-to-better-websites-layout-and-formatting.mdx

@@ -16,10 +16,7 @@ index:
   - rule: public/uploads/rules/avoid-unnecessary-css-classes/rule.mdx
   - rule: public/uploads/rules/ui-boxes/rule.mdx
   - rule: public/uploads/rules/trim-input-whitespace/rule.mdx
-  - rule: public/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/rule.mdx
   - rule: public/uploads/rules/forms-do-you-know-when-to-use-links-and-when-to-use-buttons/rule.mdx
-  - rule: public/uploads/rules/forms-do-you-include-the-number-of-results-in-comboboxes/rule.mdx
-  - rule: public/uploads/rules/create-a-combo-box-that-has-a-custom-template/rule.mdx
   - rule: public/uploads/rules/use-the-right-html-figure-caption/rule.mdx
   - rule: public/uploads/rules/printing-do-you-have-a-print-css-file-so-your-web-pages-are-nicely-printable/rule.mdx
   - rule: public/uploads/rules/printing-do-you-check-for-oversized-images-and-table/rule.mdx
@@ -34,12 +31,9 @@ index:
   - rule: public/uploads/rules/do-you-use-doctype-without-any-reference/rule.mdx
   - rule: public/uploads/rules/do-you-include-the-number-of-results-in-drop-down-list/rule.mdx
   - rule: public/uploads/rules/back-buttons/rule.mdx
-  - rule: public/uploads/rules/do-you-use-predictive-textboxes-instead-of-normal-combo-or-text-boxes/rule.mdx
-  - rule: public/uploads/rules/do-you-use-the-correct-input-type/rule.mdx
   - rule: public/uploads/rules/do-you-know-font-tags-are-no-longer-used/rule.mdx
   - rule: public/uploads/rules/do-you-know-how-to-effectively-use-non-standard-font-on-your-website/rule.mdx
   - rule: public/uploads/rules/do-you-know-its-important-to-make-your-fonts-different/rule.mdx
-  - rule: public/uploads/rules/do-you-avoid-having-reset-buttons-on-webforms/rule.mdx
   - rule: public/uploads/rules/enforce-the-text-meaning-with-icons-and-emojis/rule.mdx
   - rule: public/uploads/rules/do-you-show-the-progress-and-the-total-file-size-on-downloads/rule.mdx
   - rule: public/uploads/rules/search-results-do-you-always-give-more-information-when-searching-doesnt-find-anything/rule.mdx
@@ -61,16 +55,7 @@ index:
   - rule: public/uploads/rules/have-a-stylesheet-file/rule.mdx
   - rule: public/uploads/rules/print-url/rule.mdx
   - rule: public/uploads/rules/a-better-method-for-embedding-youtube-videos-on-your-website/rule.mdx
-  - rule: public/uploads/rules/use-adaptive-placeholders-on-your-forms/rule.mdx
   - rule: public/uploads/rules/how-to-use-ssw-style-in-radhtmlcontrol/rule.mdx
-  - rule: public/uploads/rules/control-choice-do-you-know-when-to-use-checkboxes/rule.mdx
-  - rule: public/uploads/rules/control-choice-do-you-use-checked-list-boxes-instead-of-multi-select-list-boxes/rule.mdx
-  - rule: public/uploads/rules/controls-do-you-disable-buttons-that-are-unavailable/rule.mdx
-  - rule: public/uploads/rules/controls-do-you-make-option-groups-and-check-boxes-simple-to-understand/rule.mdx
-  - rule: public/uploads/rules/consistent-fields-and-data/rule.mdx
-  - rule: public/uploads/rules/do-you-use-an-ellipsis-to-indicate-an-action-requiring-more-user-input/rule.mdx
-  - rule: public/uploads/rules/controls-do-you-include-a-select-all-checkbox-on-the-top/rule.mdx
-  - rule: public/uploads/rules/control-choice-do-you-use-comboboxes-instead-of-single-select-list-boxes/rule.mdx
   - rule: public/uploads/rules/consistent-notifications/rule.mdx
 _template: category
 ---

public/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/rule.mdx

@@ -1,60 +1,56 @@
 ---
-archivedreason: null
+type: rule
+title: Do you make required fields clear and validate inputs?
+uri: forms-do-you-indicate-which-fields-are-required-and-validate-them
+categories:
+  - category: categories/design/rules-to-better-interfaces-forms.mdx
 authors:
-- title: Adam Cogan
-  url: https://www.ssw.com.au/people/adam-cogan
-created: 2014-12-04 19:35:25+00:00
+  - title: Adam Cogan
+    url: 'https://www.ssw.com.au/people/adam-cogan'
+redirects: []
+guid: 85f4b24e-a56b-4601-acdc-aa24e56ec395
+seoDescription: 'Clearly mark required form fields and provide helpful validation to reduce errors, improve usability, and increase successful form submissions.'
+created: 2014-12-04T19:35:25.000Z
 createdBy: Tiago Araujo
 createdByEmail: TiagoAraujo@ssw.com.au
-guid: 85f4b24e-a56b-4601-acdc-aa24e56ec395
-isArchived: false
-lastUpdated: 2014-12-04 19:35:25+00:00
+lastUpdated: 2026-04-17T22:39:37.916Z
 lastUpdatedBy: Tiago Araujo
 lastUpdatedByEmail: TiagoAraujo@ssw.com.au
-redirects: []
-seoDescription: Indicate required fields and validate them to avoid user frustration
-  and ensure data conformity to business requirements.
-title: Forms - Do you indicate which fields are required and validate them?
-categories:
-  - category: categories/design/rules-to-better-websites-layout-and-formatting.mdx
-type: rule
-uri: forms-do-you-indicate-which-fields-are-required-and-validate-them
+isArchived: false
+archivedreason: null
 ---
 
 Always indicate which fields are required. Users get frustrated when they experience a wasted trip to the server, just because they did not get an obvious indication of what was required first time around.
 
 <endIntro />
 
-<imageEmbed
-  alt="Image"
-  size="large"
-  showBorder={false}
-  figurePrefix="bad"
-  figure="No visual indication for required fields when a user first sees the form"
-  src="/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/Required-field_Bad-example.jpg"
-/>
+<imageEmbed alt="Image" size="medium" showBorder={false} figurePrefix="bad" figure="No required indicators. Users must guess which fields are mandatory" src="/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/01-bad-no-required-indicators.png" />
 
+A designer can choose the most appropriate way to indicate required fields based on the layout and context. If that guidance isn’t available, use a red asterisk as a clear and widely understood default.
 
-A designer will know the best way to indicate required field depending on the layout. However if you are in doubt and don’t have a designer around, a red asterisk is definitely the best option.
+<imageEmbed alt="Image" size="medium" showBorder={false} figurePrefix="good" figure="Required fields marked with a red asterisk. Unmarked fields are optional" src="/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/02-good-with-required-indicators.png" />
 
-<imageEmbed
-  alt="Image"
-  size="large"
-  showBorder={false}
-  figurePrefix="good"
-  figure="A visual indication of what fields are required (use a red asterisk if you are not a designer)"
-  src="/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/Redstar_Good-example.jpg"
-/>
+## Make validation feedback explicit
+
+Clearly communicate validation states in real time. When a field fails, show a helpful message next to the field along with a clear visual cue such as red color and an error icon explaining what needs to be fixed. 
 
+<imageEmbed alt="Image" size="medium" showBorder={false} figurePrefix="good" figure="Invalid field is highlighted with a message explaining the issue" src="/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/03-field-validation-error.png" />
 
-### More information on ASP.NET implementation
+When it passes, provide positive confirmation so users know their input is valid and they can continue with confidence.
 
-You should combine these visual indicators with appropriate client and server side validators to make sure that your data conforms to business requirements. Adding a RequiredFieldValidator to the above textboxes gives you data validity check with minimal coding.
+<imageEmbed alt="Image" size="medium" showBorder={false} figurePrefix="good" figure="Once the input is valid, the error styling clears and a subtle check confirms success" src="/uploads/rules/forms-do-you-indicate-which-fields-are-required-and-validate-them/04-fields-validation-passed.png" />
+
+***
+
+## More information on ASP.NET implementation
+
+You should combine these visual indicators with appropriate client and server side validators to make sure that your data conforms to business requirements. Adding a `RequiredFieldValidator` to the above textboxes gives you data validity check with minimal coding.
 
 ```cshtml
 <asp:Textbox runat="Server" ID="email" />
 ```
-**❌ Figure: Bad example - No validator used, so the user won't know the email is required**  
+
+**❌ Figure: Bad example - No validator used, so the user won't know the email is required**
 
 ```cshtml
 <asp:Textbox runat="Server" ID="email"/>
@@ -63,8 +59,8 @@ You should combine these visual indicators with appropriate client and server si
 
 ID="emailReqValidator" />
 ```
-**✅ Figure: Good example - An ASP.NET validator in use, to indicate the fields required**  
 
+**✅ Figure: Good example - An ASP.NET validator in use, to indicate the fields required**
 
 <boxEmbed
   style="greybox"
@@ -73,4 +69,4 @@ ID="emailReqValidator" />
   </>}
   figurePrefix="none"
   figure=""
-/>
+/>