Twitter Bootstrap Contact form
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.
What I'm trying to achieve:
User is presented with 4 fields - Name, Email, Subject, Body and a
reCaptcha. 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.
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.
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 really care if they fill out captcha to enable the submit button
if they miss that then it's their fault.
Raw HTML of the form:
<form action="" method="post" class="contact">
<fieldset>
<legend class="span8">Send us an email!</legend>
<p class="email-desc">
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.
</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 a 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 be willing to make a donation if you help me further than
this with the javascript.
No comments:
Post a Comment