don't add the required CSS class to fields unless they're in input mode

CHANGES.txt

@@ -5,6 +5,8 @@ CHANGES
 3.0.0a4 (unreleased)
 --------------------
 
+- Only add the 'required' CSS class to widgets when they are in input mode.
+
 - Added support for IDict Widget in MultiWidget.
 
 

src/z3c/form/browser/multi.txt

@@ -1035,7 +1035,7 @@ for our multi widget and the data converter dispatcher adapter:
       </div>
       <div class="widget">
         <div class="multi-widget-display">
-          <span class="text-widget required int-field" id="widget-id-0">42</span>
+          <span class="text-widget int-field" id="widget-id-0">42</span>
         </div>
       </div>
     </div>
@@ -1048,7 +1048,7 @@ for our multi widget and the data converter dispatcher adapter:
       </div>
       <div class="widget">
         <div class="multi-widget-display">
-          <span class="text-widget required int-field" id="widget-id-1">43</span>
+          <span class="text-widget int-field" id="widget-id-1">43</span>
         </div>
       </div>
     </div>
@@ -1074,7 +1074,7 @@ We can also use the multi widget with dictionaries
       </div>
       <div class="widget">
         <div class="multi-widget-display">
-          <span class="text-widget required int-field" id="widget-id-key-0">1</span>
+          <span class="text-widget int-field" id="widget-id-key-0">1</span>
         </div>
       </div>
       <div class="label">
@@ -1085,7 +1085,7 @@ We can also use the multi widget with dictionaries
       </div>
       <div class="widget">
         <div class="multi-widget-display">
-          <span class="text-widget required int-field" id="widget-id-0">42</span>
+          <span class="text-widget int-field" id="widget-id-0">42</span>
         </div>
       </div>
     </div>
@@ -1098,7 +1098,7 @@ We can also use the multi widget with dictionaries
       </div>
       <div class="widget">
         <div class="multi-widget-display">
-          <span class="text-widget required int-field" id="widget-id-key-1">2</span>
+          <span class="text-widget int-field" id="widget-id-key-1">2</span>
         </div>
       </div>
       <div class="label">
@@ -1109,7 +1109,7 @@ We can also use the multi widget with dictionaries
       </div>
       <div class="widget">
         <div class="multi-widget-display">
-          <span class="text-widget required int-field" id="widget-id-1">43</span>
+          <span class="text-widget int-field" id="widget-id-1">43</span>
         </div>
       </div>
     </div>

src/z3c/form/browser/object.txt

@@ -941,15 +941,15 @@ Simple but often used use-case is the display form:
       <form action=".">
         <div class="row">
           <label for="form-widgets-subobject">my object</label>
-          <div class="object-widget required">
+          <div class="object-widget">
             <div class="label">
               <label for="form-widgets-subobject-widgets-foofield">
                 <span>My foo field</span>
                 <span class="required">*</span>
               </label>
             </div>
             <div class="widget">
-              <span class="text-widget required int-field"
+              <span class="text-widget int-field"
               id="form-widgets-subobject-widgets-foofield">666</span>
             </div>
             <div class="label">
@@ -965,7 +965,7 @@ Simple but often used use-case is the display form:
         </div>
         <div class="row">
           <label for="form-widgets-name">name</label>
-          <span class="text-widget required textline-field"
+          <span class="text-widget textline-field"
           id="form-widgets-name">first</span>
         </div>
         <div class="action">

src/z3c/form/browser/objectmulti.txt

@@ -1700,7 +1700,7 @@ Simple but often used use-case is the display form:
       <form action=".">
         <div class="row">
           <label for="form-widgets-listOfObject">My list field</label>
-          <div class="multi-widget required" id="form-widgets-listOfObject">
+          <div class="multi-widget" id="form-widgets-listOfObject">
             <div class="row" id="form-widgets-listOfObject-0-row">
               <div class="label">
                 <label for="form-widgets-listOfObject-0">
@@ -1710,15 +1710,15 @@ Simple but often used use-case is the display form:
               </div>
               <div class="widget">
                 <div class="multi-widget-display">
-                  <div class="object-widget required">
+                  <div class="object-widget">
                     <div class="label">
                       <label for="form-widgets-listOfObject-0-widgets-foofield">
                         <span>My foo field</span>
                         <span class="required">*</span>
                       </label>
                     </div>
                     <div class="widget">
-                      <span class="text-widget required int-field"
+                      <span class="text-widget int-field"
                             id="form-widgets-listOfObject-0-widgets-foofield">666</span>
                     </div>
                     <div class="label">
@@ -1738,7 +1738,7 @@ Simple but often used use-case is the display form:
         </div>
         <div class="row">
           <label for="form-widgets-name">name</label>
-          <span class="text-widget required textline-field"
+          <span class="text-widget textline-field"
                 id="form-widgets-name">first</span>
         </div>
         <div class="action">

src/z3c/form/browser/select-missing-terms.txt

@@ -211,7 +211,7 @@ Let's see what happens if we have values that are not in the vocabulary:
   >>> widget.value = ['0', '1', 'x']
   >>> widget.update()
   >>> print(widget.render())
-  <span id="widget-id" class="select-widget required">
+  <span id="widget-id" class="select-widget">
     <span class="selected-option">bad</span>,
     <span class="selected-option">okay</span>,
     <span class="selected-option">Missing: x</span>

src/z3c/form/browser/widget.py

@@ -19,6 +19,7 @@
 import zope.interface
 from zope.schema.fieldproperty import FieldProperty
 
+from z3c.form.interfaces import INPUT_MODE
 from z3c.form.interfaces import IFieldWidget
 from z3c.form.browser import interfaces
 
@@ -168,7 +169,7 @@ def addClass(self, klass):
     def update(self):
         """See z3c.form.interfaces.IWidget"""
         super(HTMLFormElement, self).update()
-        if self.required:
+        if self.mode == INPUT_MODE and self.required:
             self.addClass('required')
 
 

src/z3c/form/form.txt

@@ -835,7 +835,7 @@ After adding a template, we can look at the form:
         <div class="row">
             <label for="form-widgets-id">ID</label>
             <span id="form-widgets-id"
-                  class="text-widget required textline-field">srichter</span>
+                  class="text-widget textline-field">srichter</span>
         </div>
         <div class="row">
           <label for="form-widgets-name">Full Name</label>
@@ -901,7 +901,7 @@ Let's now submit the form having some invalid data.
         <div class="row">
             <label for="form-widgets-id">ID</label>
             <span id="form-widgets-id"
-                  class="text-widget required textline-field">srichter</span>
+                  class="text-widget textline-field">srichter</span>
         </div>
         <div class="row">
           <label for="form-widgets-name">Full Name</label>
@@ -1080,7 +1080,7 @@ We can now use the form as usual:
         <div class="row">
           <label for="form-widgets-id">ID</label>
           <span id="form-widgets-id"
-                class="text-widget required textline-field">rineichen</span>
+                class="text-widget textline-field">rineichen</span>
         </div>
         <div class="row">
           <label for="form-widgets-name">Full Name</label>
@@ -1158,11 +1158,11 @@ Creating a display form is simple; just instantiate, update and render it:
     <body>
       <div class="row">
         <span id="form-widgets-id"
-              class="text-widget required textline-field">srichter</span>
+              class="text-widget textline-field">srichter</span>
       </div>
       <div class="row">
         <span id="form-widgets-name"
-              class="text-widget required textline-field">Claudia Richter</span>
+              class="text-widget textline-field">Claudia Richter</span>
       </div>
       <div class="row">
         <span id="form-widgets-gender"