CFFORM and CFINPUT issue

ColdFusion , Default Add comments

I've been neglecting my blog because I have been working on several large eCommerce projects over the last two months, but I found an issue that I think is worth asking the CF community about.

With the new features in CF8, I find myself wanting to use cfform and cfinput more for binding and Ajax features, but I keep running into issues with errors generated by ColdFusion.

 Like most developers, I like to make my code modular for use in various parts of an application.  I have traditionally done this with forms, where I will set up a CFC that contains a method for displaying part of a form.  This worked great when my forms were straight HTML/JavaScript.  But take a look at this simplified example...

My CFM file...
<cfset formlibrary = createObject('component','formlib') />
<cfform action="myscript.cfm" method="post">
    <cfset formlib.printNameFields() />   
    <cfset formlib.printAddressField() />
</cfform>

My CFC file...
<cfcomponent>
    <cffunction name="printNameFields">
       First name: <cfinput type="text" name="firstname" required="yes" message="First name is required." />
       Last name: <cfinput type="text" name="lastname" required="yes" message="Last name is required." />
       etc...
    </cfcomponent>
    <cffunction name="printAddressFields">
       Line 1: <cfinput type="text" name="addr1"  />
       Line 2:  <cfinput type="text" name="addr2"  />
          etc...
    </cfcomponent>
</cfcomponent>

This code will generate a CF error because you cannot have a CFINPUT tag that is not nested inside a CFFORM tag.  However, if the error did not fire, the generated source code sent to the browser would work!  The error message that ColdFusion generates isn't really an error.  ColdFusion just doesn't understand that I am outputting the form fields from a CFC that is inside the CFFORM tag.  

This is a simple example of the problem, but what if I also wanted to use the CF8 type="datefield" CFINPUT?  I can't have that in a CFC either.  I also can't use any CF8 ajax binding on with CFINPUT tags.  

 For now, I am just putting the CFINPUT tags in the CFM file and not making the code as modular as I would like.  It is frustrating, though, that I have to repeat code on various forms for name and address form fields. 

Does anyone have a suggestion for this?  Is there a way to suppress the ColdFusion error and let it just generate the code?  Or am I missing something? 

27 responses to “CFFORM and CFINPUT issue”

  1. Todd Rafferty Says:
    I would highly recommend against CFCs being used to handle display logic like this. If you must have something, then use <cfsavecontent variable="myoutput"> to save the content and <cfreturn myoutput>. That being said, even what I recommended won't work because there's still no cfform around the block of code and it'll throw the same error.

    That being said, things to try:
    1.) Have you tried putting output="Yes" in the function?
    2.) Have you tried keeping the code modular by using cfinclude instead?
  2. Michael Sprague Says:
    Thanks Todd. For suggestion #1, the output=true doesn't work because the issue is with ColdFusion's built-in validation. It is looking for a cfform tag around the cfinput, and whether there is output or not the cfform tag just isn't in the CFC.

    Suggestion #2 will work, but it strays from the way all of my apps are structured. I have a cfc with all of my re-usable display methods, which I think is a fairly common method for handling modular displays because I see it frequently in most of the major open source CF apps on the market. It works REALLY well and efficiently except in this case when CF's validation is actually incorrect.

    I will probably just use includes for cases when I need to have modular code with CFFORM, so that is a good suggestion. Overall, though, I don't see why using a CFC display library is a bad idea. Seems to make more sense to me than having a whole series of include files.
  3. Cyrill Gross Says:
    Hi there
    It is quite simple to go around that:
    Just add a <cfform> tag qithout any attributes as an HTML-Comment into you inner cfc (the one with the form fields):

    <cffunction name="printAddressFields">
    <!-- <cfform> -->
    Line 1: <cfinput type="text" name="addr1" />
    Line 2: <cfinput type="text" name="addr2" />
    etc...
    <!-- </cfform> -->
    </cfcomponent>

    => Take care using HTML comments (<!-- -->) and not ColdFusion comments (<!--- --->).

    The ColdFusion compiler finds the <cfform> tag and therefore recognizes the code as valid but the browser does not interpretes the form (if you load it asynchronously it will be filtered by Ext at all :-) ).
    Works fine in my application...

    Regards, Cyrill
  4. Francisco Montes Says:
    Thanks a lot Cyrill you just saved my life with this!

    Coldfusion does put the code for the cfform on the source code of the page, but since it is commented out using HTML comments it shouldn´t have any effect on the page itself.
  5. Flüge Bangkok Says:
    Thank you for saving my time .
    Since one week I'm trying to fix this error but haven't succeeded in making it work.
    It seems that you cannot have a CFINPUT tag outside a CFFORM tag.
    I'm a beginner in CF and have never thought that The ColdFusion compiler could find the <cfform> in a HTML comment and recognizes the code as valid .
  6. Alan Says:
    Cyrill Gross ... that is brilliant! :)
  7. Chris Wassermann Says:
    Cyrill Gross, thank you for that great workaround. Not pretty, but it saved a lot of time for me and prevented me from having to do a major overhaul.
  8. ColdFusion Developer Says:
    Cheers Cyrill - This has been naffing me off for ages as a full form submission to the server needed doing for me to validate these CFC form fields.
  9. Gummistiefel Says:
    Does PreserveData work? I want to use it with checkboxes, I've tried setting it to "yes" and "true" but not held the data when I post the form to itself. Is there something else that I need to do in the individual field to reload the previous value?

    I'm sure I've previously tried this with other CFinput tyoes without success.
  10. Michael Sprague Says:
    @Gummistiefel - Are you using the checkboxes in a cfgrid? If so, then preservedata will not work. Also, this is hard to troubleshoot without seeing the code.
  11. activetraffic Says:
    ...made my day! I was facing the same problems!

    Thanks a lot!
  12. Stromanbieter Says:
    Big thanks from me too! This seems to work fine for me. Keep on the good work, regards from germany, Marco
  13. ldr041 Says:
    Thanks Cyrill! Helped me a lot.
  14. Spiel & Kinderwelt Says:
    good work, has some issues at the beginning but know it works perfektly!
  15. whack.amole Says:
    Thanks Cyrill!! What a simple solution. You just saved me hours, if not days, of work.
  16. seoflatrate Says:
    Thanks! My Problem is out of order! Thanks!
  17. Mike Says:
    thx. my problem is over
  18. Ecommerce Blog Says:
    thanks for this cool article. that will solve some problems.
  19. Werbetechnik Says:
    thanks for this, problems solved :)
    love it
  20. Alleinunterhalter Says:
    You just made my day. thanks for this article!!!
  21. Etikettendrucker Says:
    Oh, I had the same problem. Thanks to Todd for the solution.
  22. Billig Says:
    Thanks alot Cyrill, nice solution, works fine here as well.
  23. Versicherung Says:
    Thanks Cyrill! Helped me a lot. ;-)
  24. Netyu Says:
    Me too - thanks Cyrill! Helped me a lot. - Best regards!!!
  25. Russ Says:
    I found this a while ago, and it certainly saved me some headaches. Thanks!

    However, I've been trying to use this technique when loading a form fragment via ajax (into a cfdiv), and it only half works. It eliminates any context validation error that would occur without CF seeing a <cfform>, but form field validation does not work. Any idea how I might get that working?
  26. Michael Sprague Says:
    Try this... on the page that calls the Ajax (not in your Ajax file), use <cfajaximport tags="cfform">. That should load all the validation JavaScript.
  27. Russ Says:
    Actually, the main template already has <cfajaximport tags="cfform"> (actually, <cfajaximport tags="cfform,cftextarea">), so that apparently isn't helping any. I do I have one idea using ColdFusion.Ajax.checkForm(this, _CF_checksortbyFrm,'productlistDiv') that I'm going to try, so I'll let you know if that works out.

Leave a Reply

Leave this field empty:



Powered by Mango Blog. Design and Icons by N.Design Studio