Form Validate Plugin

Form Validate Plugin

Hi All:

I have a working form that adds the name and e-mail to a database using AJAX and not the form plugin. When the form submits the PHP does the validation and returns the error. The issue I am having is that I also want the client side validation using the validate plugin, but I am not sure where to put it in my code. I have a tried a variety of things, but I am stuck.

Can anyone help?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Test Stuff!</title>

<style type="text/css">
.error {
   font: normal 10px arial;
   padding: 3px;
   margin: 3px;
   background-color: #FC9;
   border: 1px solid  #F00;
   width: 150px;
}
</style>

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js" type="text/javascript"></script>
<script src="http://jquery.malsup.com/form/jquery.form.js?2.33" type="text/javascript"></script>

<script type="text/javascript">

  $(function() {
  $('#submit').click(function() {
  $('#response').append('<img src="images/loading.gif" alt="Currently Loading" id="loading" />');
 
     var name = $('#name').val();
     var email = $('#email').val();
    
    
     $.ajax({
        url: 'php/add.php',
        type: 'POST',
        data: 'name=' + name + '&email=' + email,
       
        success: function(result) {
           $('#loading').fadeOut("1000", function () {
                          $(this).remove();
                          });
           $('#responseText').fadeOut("4000", function() {
              $(this).hide("0", function(){
              $('#response').append($('<p id="responseText">' + result + '</p>').hide().fadeIn("10000"));                     
              }).remove();
              $('#signup').clearForm();
           });                  
           }
     });
    
     return false;
  });
 
});
</script>



</head>

<body>

<div>
<form action="php/add.php" method="post" name="signup" id="signup">
<p><label for="Name">Name:</label> <input type="text" name="name" id="name" class="required" minlength="3"/></p>
<p><label for="Email">Email:</label> <input type="text" name="email"id="email" class="required email"/></p>
<p>
  <input type="submit" value="Let me Know" id="submit" />
</p>
</form>
<div id="response">
<p id="responseText">Please sign you</p>
</div>
</div>
</body>
</html>


Thanks, Cup A. Ball