http://bassistance.de/jquery-plugins/jquery-plugin-validation/ :)
Rick Faircloth wrote: > > Alright... now I've got this working very well. > > The only problem I have now is validation. > I normally submit a page back to itself, run some > checks on the form values and throw up any errors messages > before the form processes. > > However, with the function "CalculateMortgage" below, I can't do that. > > So I need some input on how to use jQuery for validation. > > Is there some info somewhere that will walk me through that? > > I need the following validation for form input: > > Principal: There must be an entry and it must be a number after > all "$ , ." are taken out. > > Interest: There must be an entry and it must be a number after > a % sign which might be entered is taken out. > > Years: There must be an entry and the entry must be numerical. > > Can anyone point me to some validation technique info that I could > draw from? > > Thanks! > > Rick > > > === > Calc page: > > <script type="text/javascript" src="/js/jquery.js"></script> > > <script type="text/javascript"> > > function CalculateMortgage(){ > > var Params = {}; > // select all inputs of type text > $("input:text").each(function(){ > Params[$(this).attr("name")] = $(this).val(); > }); > // "post" the form. The Param object mimics form fields > $.post("/path/to/yourdatapage.cfm", Params, > function(data){ > // this is the processing function. > // append what you get back to the element > with ID = Result after > clearing its contents > $("#Result").empty().append(data); > } > ); > } > > </script> > > <form name="f"> > <table> > <tr> > <td align="right"><strong>Principal:</strong></td> > <td><input type="text" name="Principal"></td> > </tr> > <tr> > <td align="right"><strong>Interest > Rate:</strong></td> > <td><input type="text" name="InterestRate"></td> > </tr> > <tr> > <td align="right"><strong>Duration:</strong></td> > <td><input type="text" name="Duration"></td> > </tr> > <tr> > <td align="right"><strong>Result:</strong></td> > <td><span id="Result"></span></td> > </tr> > <tr> > <td align="right"> </td> > <td><input type="button" value=" Calculate " > onClick="CalculateMortgage();return false;"></td> > </tr> > </table> > </form> > > ======== > > Page from which you are getting the data: > > <cfsetting showdebugoutput="no"><cfset calc = form.Principal * > form.InterestRate * form.Duration> > > <cfcontent reset="yes"><cfoutput>#DollarFormat(calc)#</cfoutput> > > > > Rick Faircloth wrote: >> >> Hi, Daemach... >> >> Thanks for the guidance, but unfortunately, I'm still using >> CF 4.5, so CFC's are obviously not an option. I plan to >> upgrade this summer to CF 8 and catch up with everyone. >> >> I was looking over your code, too... that complicated stuff! >> (For someone just starting out, anyway...) After looking over >> the code, I can begin to see how it's being done... just wish >> I could use AjaxCFC! >> >> Thanks for your time and help! >> >> Rick >> >> -----Original Message----- >> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On >> Behalf Of Daemach >> Sent: Wednesday, February 28, 2007 6:00 PM >> To: discuss@jquery.com >> Subject: Re: [jQuery] Need some guidance... >> >> >> Hi Rick - >> >> This is one of those things I would use ajaxCFC for since it handles >> serialization automatically. The idea here is that you need to serialize >> the values of your form fields, send them to the server, deserialize, >> calculate and put the results into some kind of structure which gets >> serialized again and returned to the browser for processing which starts >> with deserializing. Dealing with the serialization/deserialization >> transparently is what makes ajaxCFC so great. >> >> First, download ajaxcfc here: >> http://www.robgonda.com/blog/projects/ajaxcfc/download.cfm >> >> in the zip file drill down to ajaxCFC/branches/jquery/core/. Put the >> .cfc's >> in some accessible folder on your web server, then copy everything inside >> the /js folder to your javascript repository - I create a subfolder to >> keep >> it separate: /js/ajaxCFC. That's it for the install. >> >> This sample code should get you started. I stuck the ajax call directly >> into the click event on the button, but you could put all of that in a >> separate function and then call the function from the click event handler >> if >> you want. >> >> =========================== >> >> >> your html/cfm page with the calculator: >> >> <script type="text/javascript" src="/js/jquery.js"></script> >> <script type="text/javascript" >> src="/js/ajaxCFC/jquery.AjaxCFC.js"></script> >> >> <script type="text/javascript"> >> // additional files >> $.AjaxCFC({require:'json'}); >> // more additional files >> // $.AjaxCFC({require:'json,wddx,dDumper,log4j,DWRSyntax,blockUI'}); >> >> // optional global settings >> // using these setters also automatically include dependencies >> >> > //$.AjaxCFCHelper.setAjaxLoadImage("#snort","/images/ajax_circleball.gif"); >> $.AjaxCFCHelper.setDebug(false); >> $.AjaxCFCHelper.setBlockUI(false); >> $.AjaxCFCHelper.setUseDefaultErrorHandler(false); >> $.AjaxCFCHelper.setSerialization('json'); // json, wddx >> >> $(document).ready( function() { >> >> // Add click event to button >> >> $('#ajaxit').click(function() { >> //create an object to pass to the cfc. can also be an >> array, simple >> value, whatever you want. Objects turn into cf structures. >> var obj = {firstVal:$('#firstVal').val(), >> secondVal:$('#secondVal').val(), >> thirdVal:$('#thirdVal').val(), randomstring:"why not"} >> //do ajax call >> >> $.AjaxCFC({ >> url: "/pathto/your.cfc", >> method: "calculate", >> data: obj, >> // can be an anonymous function, or the name of the >> function that will >> handle the return results. >> success: showResults >> }); >> }); >> >> }); >> >> function showResults(data){ >> // data will be whatever the cfc passed back in js format - >> structure in >> this case to make it easy. >> $('#result').val(data.results); >> >> } >> >> </script> >> >> firstVal: <input id="firstVal" name="firstVal" type="text"><br> >> secondVal: <input id="secondVal" name="secondVal" type="text"><br> >> thirdVal: <input id="thirdVal" name="thirdVal" type="text"> >> <input id="ajaxit" type="submit" name="ajaxit" value="AjaxIt"> >> <hr> >> >> result: <input id="result" name="result" type="text"> >> >> >> ================ >> >> Your cfc file should go in the same folder as ajax.cfc: >> >> >> <cfcomponent extends="ajax"> >> <!--- >> <cfscript> >> setDebugMode('request'); >> </cfscript>---> >> >> <cffunction name="calculate" output="no" access="private"> >> >> <cfscript> >> obj = arguments; >> data = structNew(); >> temp = obj.firstVal + obj.secondVal + obj.thirdVal; >> StructInsert(data, "results", temp); >> </cfscript> >> >> <cfreturn data> >> </cffunction> >> </cfcomponent> >> >> >> >> Rick Faircloth wrote: >>> >>> Hi, all. >>> >>> I've just started using jQuery recently and now >>> I'm trying to understand how to use it with AJAX >>> and I just don't know enough about how it works >>> to get started on a fairly simple app. The sample app I've >>> been tinkering with sends a URL variable for a User_ID >>> using AJAX to a CF page, which runs a query and >>> returns the info to the calling page and appends >>> it to the body. I'd like to send results back to the >>> form fields, as well as the calculated result. >>> >>> I just don't have a clue how to set this up. >>> >>> I have a mortgage calculator and I want the user >>> to be able to enter the principal, interest rate, >>> and duration in years, then run a calculation on it >>> and return the result. >>> >>> I've set this up in a regular form that submits back >>> to the page it's on and it works fine. It's coded in CF. >>> >>> I'd like to be able to calculate and return the results using AJAX. >>> >>> I've worked some very simple code using AJAX (actually >>> it was given to me), but I have no idea how to code for >>> the above scenario. >>> >>> Would anyone care to give this CF'er some guidance >>> on creating this small jQuery/CF/AJAX app? >>> >>> Thanks for any help! >>> >>> Rick >>> >>> _______________________________________________ >>> jQuery mailing list >>> discuss@jquery.com >>> http://jquery.com/discuss/ >>> >>> >> >> -- >> View this message in context: >> http://www.nabble.com/Need-some-guidance...-tf3323366.html#a9240414 >> Sent from the JQuery mailing list archive at Nabble.com. >> >> >> _______________________________________________ >> jQuery mailing list >> discuss@jquery.com >> http://jquery.com/discuss/ >> >> >> >> _______________________________________________ >> jQuery mailing list >> discuss@jquery.com >> http://jquery.com/discuss/ >> >> > > -- > View this message in context: > http://www.nabble.com/Need-some-guidance...-tf3323366.html#a9244359 > Sent from the JQuery mailing list archive at Nabble.com. > > > _______________________________________________ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > > > _______________________________________________ > jQuery mailing list > discuss@jquery.com > http://jquery.com/discuss/ > > -- View this message in context: http://www.nabble.com/Need-some-guidance...-tf3323366.html#a9304429 Sent from the JQuery mailing list archive at Nabble.com. _______________________________________________ jQuery mailing list discuss@jquery.com http://jquery.com/discuss/