Add new form docs

server/documents/behaviors/form.html.eco

@@ -282,6 +282,51 @@ type        : 'UI Behavior'
       </form>
     </div>
 
+    <div class="prompt example">
+      <h4 class="ui header">
+        Validating Programmatically
+        <div class="ui teal label">Updated in 2.2.8</div>
+      </h4>
+      <p>Form validation provides additional behaviors to programmatically trigger validation for either the form or an individual field, and check validation on the form or individual fields.</p>
+      <p>Please see the <a href="#behaviors">behaviors section</a> for an explanation on syntax.</p>
+      <table class="ui celled sortable basic table segment">
+        <tbody>
+          <tr>
+            <td class="four wide"><b>validate form</b></td>
+            <td>Validates entire form and displays errors if necessary</td>
+          </tr>
+          <tr>
+            <td class="four wide"><b>is valid</b></td>
+            <td>Returns whether a form is valid</td>
+          </tr>
+          <tr>
+            <td class="four wide"><b>is valid(fieldName)</b></td>
+            <td>Returns whether a field in a form is valid (does not update UI)</td>
+          </tr>
+          <tr>
+            <td class="four wide"><b>validate field(fieldName)</b></td>
+            <td>Validates a particular field and displays errors if necessary</td>
+          </tr>
+        </tbody>
+      </table>
+      <div class="ignored code">
+      $('.ui.form')
+        .form({
+          fields: [
+           email: 'empty',
+           name: 'empty'
+          ]
+        })
+      ;
+      if( $('.ui.form').form('is valid', 'email')) {
+        // email is valid
+      }
+      if( $('.ui.form').form('is valid') {
+        // form is valid (both email and name)
+      }
+      </div>
+    </div>
+
     <h2 class="ui dividing header">Rules</h2>
 
     <div class="no example">
@@ -838,7 +883,7 @@ type        : 'UI Behavior'
           </div>
           <div class="field">
             <label>E-mail</label>
-            <input name="email" type="text" value="jack@foo">
+            <input name="email" type="text" value="jack">
           </div>
         </div>
         <div class="two fields">
@@ -1696,7 +1741,7 @@ type        : 'UI Behavior'
   </div>
 
   <div class="ui tab" data-tab="settings">
-    <h2 class="ui dividing header">Behavior</h2>
+    <h2 class="ui dividing header">Behaviors</h2>
 
     All the following behaviors can be called using the syntax
 
@@ -1713,13 +1758,17 @@ type        : 'UI Behavior'
         <td>is valid</td>
         <td>Returns true/false whether a form passes its validation rules</td>
       </tr>
+      <tr>
+        <td>is valid(fieldName)</td>
+        <td>Returns true/false whether a field passes its validation rules</td>
+      </tr>
       <tr>
         <td>validate form</td>
-        <td>Validates form and calls onSuccess or onFailure</td>
+        <td>Validates form, updates UI, and calls onSuccess or onFailure</td>
       </tr>
       <tr>
-        <td>get change event</td>
-        <td>gets browser property change event</td>
+        <td>validate field(fieldName)</td>
+        <td>Validates field, updates UI, and calls onSuccess or onFailure</td>
       </tr>
       <tr>
         <td>get field(id)</td>

server/documents/hotfix.html.eco

@@ -71,17 +71,73 @@ type       : 'Library'
   </div>
 </div> -->
 <div class="ui container">
-<div class="ui vertical inverted very padded segment">
-    <div class="ui vertical inverted very padded segment">
-        <div class="ui vertical inverted very padded segment">
-            Lorem...
+<form class="ui form segment">
+        <p>Tell Us About Yourself</p>
+        <div class="two fields">
+          <div class="field">
+            <label>Name</label>
+            <input placeholder="First Name" name="name" type="text">
+          </div>
+          <div class="field">
+            <label>Gender</label>
+            <select class="ui dropdown" name="gender">
+              <option value="">Gender</option>
+              <option value="male">Male</option>
+              <option value="female">Female</option>
+            </select>
+          </div>
         </div>
-    </div>
-</div>
+        <div class="two fields">
+          <div class="field">
+            <label>Username</label>
+            <input placeholder="Username" name="username" type="text">
+          </div>
+          <div class="field">
+            <label>Password</label>
+            <input type="password" name="password">
+          </div>
+        </div>
+        <div class="field">
+          <label>Skills</label>
+          <select name="skills" multiple class="ui dropdown">
+            <option value="">Select Skills</option>
+            <option value="css">CSS</option>
+            <option value="html">HTML</option>
+            <option value="javascript">Javascript</option>
+            <option value="design">Graphic Design</option>
+            <option value="plumbing">Plumbing</option>
+            <option value="mech">Mechanical Engineering</option>
+            <option value="repair">Kitchen Repair</option>
+          </select>
+        </div>
+        <div class="inline field">
+          <div class="ui checkbox">
+            <input type="checkbox" name="terms" />
+            <label>I agree to the terms and conditions</label>
+          </div>
+        </div>
+        <div class="ui primary submit button">Submit</div>
+        <div class="ui error message"></div>
+      </div>
+    </form>
 </div>
 <script>
   $(document).ready(function() {
-    $('.ui.modal').modal('show');
+    $('.ui.dropdown').dropdown();
+      $('.ui.form')
+        .form({
+          fields: {
+            name     : 'empty',
+            gender   : 'empty',
+            username : 'empty',
+            password : ['minLength[6]', 'empty'],
+            skills   : ['minCount[2]', 'empty'],
+            terms    : 'checked'
+          }
+        })
+      ;
+      // $('.ui.form').form('validate field', 'username');
+      console.log($('.ui.form').form('is valid', 'username'));
   });
 
 </script>