[jQuery] validate on ajaxform
let me first say i'm more of a designer then a programmer but i've
whipped up some jquery to submit a form via ajaxform but i need to
validate can anyone help me out? I'm just looking to do bare bones
validate (make border red on error input field) heres my code
jquery
----------
$(document).ready(function(){
$("#extra").css("display","none");
$("#checkme").click(function(){
if ($("#checkme").is(":checked"))
{
$("#extra").slideDown("slow");
}else{
$("#extra").slideUp("slow");
}
});
$("#subscribeme").click(function () {
$("#sform").slideDown("slow");
});
$("#close").click(function () {
$("#sform").slideUp("slow");
});
$('#subscribeform').ajaxForm(function() {
$(this).validate();
function runIt() {
$("#cover").fadeIn("fast");
$("#sform").fadeOut(10000);
}
runIt();
});
$("#cover").click(function () {
$("#sform").slideUp("slow");
});
});
-----------
end jquery
html
---------
<div id="sform">
<div id="cover">Thank you! You are now subscribed to the
Education Newsletter.</div>
<form method="post" name="subscribeform"
id="subscribeform" action="process.php">
<table style="width: 100%">
<tr>
<td width="250"><strong>Email:</strong> <input type="text"
id="email" name="email" value="" class="{required:true}"></td>
<td><strong>Subscribe SMS?</strong> <input type="checkbox"
id="checkme"></td>
<td> </td>
<td><input type="image" src="images/btn_subscribe.gif"
value="submit"></td>
</tr>
<tr>
<td width="250"><div id="extra"><strong>SMS Number:</strong>
<input type="text" id="phone" name="phone" value=""
class="{phone:true}"></div></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
<div id="close"><a href="javascript:;">Close</a></div>
</div>
----------
end html
css
------------
#sform {
display:none;
text-align:right;
padding:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
border-left:1px #007cc6 dotted;
border-right:1px #007cc6 dotted;
border-bottom:1px #007cc6 dotted;
background-image:url('images/subscribe_bg.jpg');
background-repeat:repeat-x;
position:absolute;
width:583px;
}
#cover {
width:100%;
height:100%;
position:absolute;
left:0;
top:0;
display:none;
line-height:100%;
text-align:center;
background-image:url('images/cover_bg.gif');
background-repeat:repeat-x;
font-family:"Trebuchet MS", Arial;
font-size:18px;
font-weight:bold;
color:#FFFFFF;
padding-top:35px;
z-index:5;
}
#subscribeme {
text-align:right;
margin:0px;
padding:0px;
}
#subscribe {
border-bottom:1px #0e8cbb solid;
height:15px;
margin:0px;
padding:0px;
}
#close a{
text-decoration:none;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
z-index:10;
}
#close hover{
text-decoration:none;
color:#000000;
color:#000000;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
z-index:10;
}
#email {
width:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#007cc6;
border:1px #005c93 solid;
}
#phone {
width:150px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#007cc6;
border:1px #005c93 solid;
}