PDA

View Full Version : Jquery forms


gigiloumill
11-16-2011, 08:06 PM
Guys, I've been at this all day and I can't seem to find the answer. I'm trying to make all the fields validate the form and so far the only one doing it is the "email" field. Can someone please tell me what I'm doing wrong? Thanks..

<form class="contact-form" action="#contact" id="contactForm" method="post">

<ul>
<li class="odd">
<label for="firstname">Name <small>(required)</small></label>
<input tabindex="1" type="text" name="firstname" id="firstname" onblur="if(this.value == ''){this.value='Enter your first name (required)'}" onclick="if(this.value=='Enter your first name (required)'){this.value=''}" value="Enter your first name (required)" class="requiredField" />
</li>
<li class="even">
<label for="lastName">Last name <small>(required)</small></label>
<input tabindex="4" type="text" name="lastName" id="lastName" onblur="if(this.value == ''){this.value='Enter your last name (required)'}" onclick="if(this.value=='Enter your last name (required)'){this.value=''}" value="Enter your last name (required)" class="requiredField"/>
</li>

<li class="odd">
<label for="telephone">Telephone <small>(required)</small></label>
<input tabindex="3" type="text" name="telephone" id="telephone" onblur="if(this.value == ''){this.value='Enter a telephone (required)'}" onclick="if(this.value=='Enter a telephone (required)'){this.value=''}" value="Enter a telephone (required)" class="requiredField " />
</li>
<li class="even">
<label for="email">Email <small>(required)</small></label>
<input tabindex="2" type="email" name="email" id="email" onblur="if(this.value == ''){this.value='Your email address (required)'}" onclick="if(this.value=='Your email address (required)'){this.value=''}" value="Your email address (required)" class="requiredField email" />
</li>
<li class="full-length">
<label for="commentsText">Your Comment <small>(Required)</small></label>
<textarea tabindex="5" name="comments" id="commentsText" class="requiredField"></textarea>
</li>
<li class="submit-button">
<button type="submit" class="button red right">Send Message</button>
</li>
<li class="odd">
<span class="validation-inputs" style="display:block;position:absolute;left:-9999px;"><label for="checking" class="screenReader">This is a validation field to stop spam, if you want to send this message, leave this field empty.</label><input type="text" name="checking" id="checking" class="screenReader" value="" /></span>
<input type="hidden" name="submitted" id="submitted" value="true" />
</li>
</ul>

</form>


css #contact{
border-bottom:none;
padding-bottom:0px;
width:900px;
margin:0 auto;
height:450px;
}
#contact .thanks{
width:100%;
text-align:center;
}
#contact .title{
height:177px;
width:100%;
no-repeat center center;
text-indent:-9999px;
}
#contact .contact-form{
float:right;
width:590px;

}
#contact .contact-form label{
display:block;
margin:0 0 5px 0;
font-size:18px;
color:#555;
letter-spacing:-0.5px;
position:absolute;
left:-9999px;
}
#contact .contact-form ul{
margin:0;
overflow:hidden;
}
#contact .contact-form ul li{
list-style:none;
overflow:hidden;
float:left;
padding-bottom:10px;
}
#contact .contact-form ul li.odd{
padding-right:10px;
}
#contact .contact-form ul li.full-length{
margin:0px;
}
#contact .contact-form ul li.submit-button{
width:100%;
}
#contact .contact-form ul li.send-copy label:hover{
cursor:pointer;
}
#contact .contact-form ul li.send-copy label{
font-size:16px;
}
#contact .contact-form ul li.send-copy input{
display:block;
float:left;
width:auto;
margin:2px 10px 0 0;
}
#contact .contact-form ul li.send-copy input:hover{
cursor:pointer;
}
#contact .contact-form small{
color:#999;
}
#contact .contact-form input{
font-family:"proxima-nova-condensed-1","proxima-nova-condensed-2","Helvetica Neue","Arial";
border:1px solid #BABABA;
background:#FFF;
width:216px;
padding:10px;
font-size:14px;
color:#666;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
color:#999;
}
#contact .contact-form input:focus{
color:#444;
}
#contact .contact-form em.error{
font-size:12px;
}
#contact .contact-form textarea{
font-family:"proxima-nova-condensed-1","proxima-nova-condensed-2","Helvetica Neue","Arial";
width:464px;
height:100px;
border:1px solid #BABABA;
background:#FFF;
padding:10px;
font-size:14px;
color:#999;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
-moz-box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03);
-webkit-box-shadow:0px 2px 2px rgba(0,0,0,0.05),inset 0px 2px 0px rgba(0,0,0,0.03));
}
#contact .contact-form textarea:focus{
color:#444;
}
#contact .contact-form button{
clear:both;
}
#contact .right-section{
float:left;
width:248px;
padding-left:25px;
}
#contact .right-section h3{
font-size:18px;
margin-top:0px;
color:#F00;
}
#contact .right-section p{
font-size:13px;
font-weight:300;
}
#contact .right-section ul.contact-list{
font-size:13px;
font-weight:600;
line-height:24px;
}
#contact .right-section ul.contact-list li{
list-style:none;
}

johnMoss
11-19-2011, 01:31 AM
Without seeing the whole page It's hard to tell, i.e. I assume you have the jquery validate script installed up in the head section. Another thing is you have a css declaration in your 'action' script. That should be a call to a php mailer, right?