php - JavaScript for Twitter-Bootstrap Contact form -

i'm working on first bootstrap project , i'm having trouble finding i'm trying achieve. think it's simpler i'm making out i'm terrible @ javascript- bulk of problem.

what i'm trying achieve:

user presented 4 fields - name, email, subject, body , recaptcha. part hard me client-side check of contact form. fields required. don't want submit button enabled unless fields have requirements met. , if not meet requirements of each field when leave add id="inputerror" field.

once requirements met remove disabled="disabled" field button input , 'disabled' class button. problem on form load, injecting disabled class last class object , adding disabled="disabled" string.

constraints:

• name min(3) max(32)
• email min(8) max(64) + correct email format
• subject min(3) max(32)
• body min(20) max(420)
• i don't care if fill out captcha enable submit button if miss it's fault.

raw html of form:

    <form action="" method="post" class="contact">     <fieldset>         <legend class="span8">send email!</legend>             <p class="email-desc">                 send ideas, feedback, job requests or want tell us. want provide games have voice. we're open platform develop , expect remain way.              </p>         <label>name</label>         <input type="text" class="input-xlarge" name="name" placeholder="john doe" autofocus>          <label>email</label>         <input type="text" class="input-xlarge" name="email" placeholder="email@domain.com">          <label>subject</label>         <input type="text" class="input-xxlarge" name="subject" placeholder="i couldn't think of better subject...">          <label>body</label>          <textarea class="email-form" name="body"></textarea>          <div class="row">             <div class="submit-row">                 <div class="pull-left">                     <!-- recaptcha -->                  </div>                 <button type="submit" class="btn btn-large btn-primary submit-email" id="submit">submit</button>             </div>         </div>       </fieldset>     </form> 

please help! i'd willing make donation if me further javascript.

i'll update site contact form can found on; http://www.geekdgames.com/contact.php

i recommend using vanadiumjs client side validation.

https://github.com/lambder/vanadium

your input field like

<input name="firstname" id="fname" class=":required :alpha :wait;1000      :min_length;5 input-xxlarge" type="text">  <input name="email" class=":required :email :wait;1000      :min_length;5 input-xxlarge" type="text"> 

and on.

the vanadium automatically disables submit if validation fails.in case of captcha,you can use ajax veriy it.the ajax in vanadium buggy.

<input type=text id=captcha class=':required;' name=captcha>  $("#captcha").change(function() {     $.ajax({              url:'/verifycpatcha/?captcha='+ $('#captcha').val()                      }).done(function(data)             {                 if(data=='0')                 {                     alert("wrong");                     $('#captcha').val('');                     $('#captcha').focus();                 }             }); }); 

this clear captcha field if wrong,and vanidium prevents form submitting.

however,client side validation not recommended user can disable javascript.