problems with validate and fancybox

problems with validate and fancybox

Hi guys im relatively new to jquery but i have a conflict of sorts

i have tried both jquery.validate and jquery.fancybox and am impressed with both, however i would like to use validate on a form that is inline in the fancy box

the fancy box loads the form ok, however once i trigger a non-valid entry the script stops

here is the test page that fails

any ideas on this ?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
     
    <link rel="stylesheet" type="text/css" href="./cssjs/fancybox/my-jquery.fancybox-1.3.1.css" media="screen" />
    <script type="text/javascript" src="./cssjs/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="./cssjs/jquery.validate.js"></script>

    <script type="text/javascript" src="./cssjs/fancybox/jquery.fancybox-1.3.1.js"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#quoteWater").fancybox({
                'titlePosition'        : 'inside',
                'transitionIn'        : 'none',
                'transitionOut'        : 'none',
                'onStart'            : 'null',
                'onClosed'            : 'null'
                });
       
        });    
           
           
        $(document).ready(function(){
            $("#commentForm").validate();
         });
    </script>


    <style type="text/css">
    * { font-family: Verdana; font-size: 96%; }
    label { width: 10em; float: left; }
    label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
    p { clear: both; }
    .submit { margin-left: 12em; }
    em { font-weight: bold; padding-right: 1em; vertical-align: top; }
    </style>
     
     
    </head>
    <body>
     
    <h2><a id="quoteWater" href="#water" title="Solar Hot water quote">Get a quote for solar hot water</a></h2>
       

        
    <div style="display: none;">
        <div id="water" style="width:1040px;height:500px;overflow:auto;">
     <form class="cmxform" id="commentForm" method="get" action="">
     <fieldset>
       <legend>A simple comment form with submit validation and default messages</legend>
       <p>
         <label for="cname">Name</label>
         <em>*</em><input id="cname" name="name" size="25" class="required" minlength="2" />
       </p>
       <p>
         <label for="cemail">E-Mail</label>
         <em>*</em><input id="cemail" name="email" size="25"  class="required email" />
       </p>
       <p>
         <label for="curl">URL</label>
         <em>  </em><input id="curl" name="url" size="25"  class="url" value="" />
       </p>
       <p>
         <label for="ccomment">Your comment</label>
         <em>*</em><textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
       </p>
       <p>
         <input class="submit" type="submit" value="Submit"/>
       </p>
     </fieldset>
     </form>
     </div></div>
    </body>
    </html>


















































































    • Topic Participants

    • jason