ColdFusion jQuery validation plugin + captcha

Question

I have functioning jQuery validation code but I am trying to add a captcha. I think the validation is set correctly but the captchacheck.cfm page is set up wrong.

HTML page:

<script>
$(document).ready(function() {
  $("#captchaDiv").load("captcha-show.cfm");    

  $("#reloadLink").click(function(e) {
    $("#captchaDiv").load("captcha-show.cfm");            
    e.preventDefault();
  });
})
</script>

<!--end refresh captcha-->

<script type="text/javascript">
$.validator.setDefaults({
  submitHandler: function() {
    // alert("submitted!"); 
    $("#signupForm").submit();
  }
});

$().ready(function() {
  $("#signupForm").validate({
    rules: {
      cap: {
        required: true,
        remote: "captchacheck.cfm"
    },
    messages: {
      cap: "captcha does not match"
    }
  }});
});
</script>

<!--the form-->
<form ....>

<div class="name-field">
<!--- Use the randomly generated text string for the CAPTCHA image. --->
  <div id="captchaDiv"></div>
</div>

<div class="name-field">please type what you see:</div>

<div class="name-field">
  <input id="cap" type="text" name="cap" placeholder="enter captcha"/>
</div>  
<div class="ppnw">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Can't read? <a href="" id="reloadLink">Reload</a>
</div>

<div class="formbut1">
    <input class="button" type="submit" name="submit" id="subsales" value="Submit" />
</div>
</fieldset>
</form>

Here is the remote page (captchacheck.cfm):

<cfsetting enablecfoutputonly="true">

<cfif cap eq session.captcha>
 <cfset answer = TRUE>

 <cfoutput> #answer#</cfoutput>   
<cfelse>
 <cfset answer = FALSE>

 <cfoutput> #answer#</cfoutput> 
</cfif>

Here is the page that generates the captcha image:

<cffunction name="makeRandomString" returnType="string" output="false">
<cfset var chars = "23456789ABCDEFGHJKMNPQRS">
<cfset var length = 5> <!---randRange(4,7)--->
<cfset var result = "">
<cfset var i = "">
<cfset var char = "">

<cfscript>
for(i=1; i <= length; i++) {
    char = mid(chars, randRange(1, len(chars)),1);
    result&=char;
}
</cfscript>

<cfreturn result>
</cffunction>

<cfset session.captcha = makeRandomString()>
<cfimage action="captcha" text="#session.captcha#" width="300" height="40">

Answer 1

Here is the Working Solution: Simple Javascript Working Example, No Jquery

Captcha-Show.cfm

<cffunction name="makeRandomString" returnType="string" output="false">
  <cfset var chars = "23456789ABCDEFGHJKMNPQRS">
  <cfset var length = randRange(2,7)>
  <cfset var result = "">
  <cfset var i = "">
  <cfset var char = "">
  <cfscript>
    for(i=1; i <= length; i++) {
        char = mid(chars, randRange(1, len(chars)),1);
        result&=char;
    }
    </cfscript>
  <cfreturn result>
</cffunction>
<cfset Session.captchaText = makeRandomString()/>
<cfset captchaimagepath = getdirectoryfrompath(getcurrenttemplatepath()) & 'newcaptcha' & gettickcount() & '.png'>
<cfimage action="captcha" width="192" height="60" text="#session.captchaText#" destination="#captchaimagepath#" difficulty="medium">
<cfcontent reset="yes" type="image/png" file="#captchaimagepath#" deletefile="yes">

Main File where you want to call the Captcha Code:

<div align="left">
      <cfoutput><a onClick="verifyCode()"><img src=Captcha-Show.cfm?r=#gettickcount()# id=sessioncaptcha alt=captcha width=192 height=60></a></cfoutput>
      </div><br>Click on the Image to reload a New Code!

function verifyCode() 
{
    document.getElementById('sessioncaptcha').src = 'captcha.cfm?r='+new Date().getTime();  
}