title: JavaScript for Twitter-Bootstrap Contact form
body: <p>I'm working on my first bootstrap project and I'm having trouble finding help with specifically what I'm trying to achieve. I think it's simpler than what I'm making it out to be but I'm terrible at javascript- which is the bulk of my problem.</p>
  
  <p>What I'm trying to achieve:</p>
  
  <p>User is presented with 4 fields - <strong>Name, Email, Subject, Body</strong> and a <strong>reCaptcha</strong>. The part that is hard for me is the client-side check of the contact form. All fields are required. I don't want the submit button to be enabled unless all the fields have the requirements met. And if they do not meet the requirements of each field when they leave it will add the id="inputError" to the field.</p>
  
  <p>Once all requirements are met it will remove the disabled="disabled" field from the button input and the 'disabled' class from the button. My problem is on form load, injecting the disabled class as the last class object and adding the disabled="disabled" into string.</p>
  
  <h2><strong>Constraints:</strong></h2>
  
  <ul>
  <li>name min(3) max(32)</li>
  <li>email min(8) max(64) + correct email format</li>
  <li>subject min(3) max(32)</li>
  <li>body min(20) max(420)</li>
  <li>I don't really care if they fill out captcha to enable the submit button if they miss that then it's their fault.</li>
  </ul>
  
  <p>Raw HTML of the form:</p>
  
  <pre><code>    &lt;form action="" method="post" class="contact"&gt;
      &lt;fieldset&gt;
          &lt;legend class="span8"&gt;Send us an email!&lt;/legend&gt;
              &lt;p class="email-desc"&gt;
                  Send us ideas, feedback, job requests or anything that you want to tell us. We want to provide games where you have a voice. We're as open as the platform that we develop for and we expect it to remain that way. 
              &lt;/p&gt;
          &lt;label&gt;Name&lt;/label&gt;
          &lt;input type="text" class="input-xlarge" name="name" placeholder="John Doe" autofocus&gt;
  
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input type="text" class="input-xlarge" name="email" placeholder="email@domain.com"&gt;
  
          &lt;label&gt;Subject&lt;/label&gt;
          &lt;input type="text" class="input-xxlarge" name="subject" placeholder="I couldn't think of a better subject..."&gt;
  
          &lt;label&gt;Body&lt;/label&gt;
  
          &lt;textarea class="email-form" name="body"&gt;&lt;/textarea&gt;
  
          &lt;div class="row"&gt;
              &lt;div class="submit-row"&gt;
                  &lt;div class="pull-left"&gt;
                      &lt;!-- reCaptcha --&gt; 
                  &lt;/div&gt;
                  &lt;button type="submit" class="btn btn-large btn-primary submit-email" id="submit"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/form&gt;
  </code></pre>
  
  <p>Please help! I'd be willing to make a donation if you help me further than this with the javascript.</p>
  
  <p>I'll update the site the contact form can be found on; <a href="http://www.geekdgames.com/contact.php" rel="nofollow">http://www.geekdgames.com/contact.php</a></p>