Skip to main content
R
Richard_Herbert__UK_
Inspiring
December 14, 2006
Answered

Extending CFFORM JavaScript Validation

  • December 14, 2006
  • 6 replies
  • 1316 views
How can I extend the JavaScript validation offered by CFFORM?

What I have is a CFSELECT with a <option value="">Please Select...</option> inserted before the entries populated from a query.

What I want is the default "Please Select..." option to be rejected as a non-valid selection as if no selection had been made.

I can't seem to be able to insert another JavaScript function into the standard onSubmit function that CFMX generates.

Anyone got a way around this?

    This topic has been closed for replies.
    Correct answer Richard_Herbert__UK_
    Just thought I'd let people know I gave up with the JS in CFFORM. It just wasn't flexible enough and I couldn't insert my own functions in the auto-generated form submit function. I've now started using qForms JavaScript API from PengoWorks - http://pengoworks.com/index.cfm?action=get:qforms

    6 replies

    R
    Richard_Herbert__UK_AuthorCorrect answer
    Inspiring
    January 19, 2007
    Just thought I'd let people know I gave up with the JS in CFFORM. It just wasn't flexible enough and I couldn't insert my own functions in the auto-generated form submit function. I've now started using qForms JavaScript API from PengoWorks - http://pengoworks.com/index.cfm?action=get:qforms
    A
    Anonymous
    January 2, 2007
    Dick,

    I was on looking for more detailed information on coldfusion report builder. I think this is what your looking for, here are the steps.

    This setup works in the lastest mx7 version. prior version syntax is slightly different. Not only does it reference my own javascript but all cfselect and such validations work as well.

    1. I declare a subfolder to store the reference to my own addtional javascript - let's call it, add.js from a coldfusion page ( say....addpage.cfm).

    2. then right below the </header> I place my reference to my additional javascript.

    3. then adjust the submit.

    Here is the example: (hope this helps)

    function OnSubmit1(){
    x=window.document.addpage
    input=x.cost.value
    if (input.length<5) {
    alert("Required Field. SAP Cost Center must be 5 digits in length.");
    x.cost.focus();
    return false; }
    else
    return true; }

    function OnSubmit2(){
    x=window.document.addpage
    input=x.ffromm.value
    if (input.length<2) {
    alert(" Function From Month - Required Field. Must be 2 digits in length.");
    x.ffromm.focus();
    return false; }
    else
    return true; }

    function OnSubmit3(){
    x=window.document.addpage
    input=x.ffromd.value
    if (input.length<2) {
    alert(" Function From Day - Required Field. Must be 2 digits in length.");
    x.ffromd.focus();
    return false; }
    else
    return true; }

    function OnSubmit4(){
    x=window.document.addpage
    input=x.ffromy.value
    if (input.length<2) {
    alert(" Function From Year - Required Field. Must be 2 digits in length.");
    x.ffromy.focus();
    return false; }
    else
    return true; }


    function checkFields(){
    if (!OnSubmit1()) return(false)
    if (!OnSubmit2()) return(false)
    if (!OnSubmit3()) return(false)
    if (!OnSubmit4()) return(false)
    return(true);
    }

    ********************
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <script type="text/javascript" src="/mahrqi/pebt/scripts/add.js"></script>
    <cfinclude template="../templates/SiteHeader1.cfm">
    <center>
    <h3>Development ADD Menu 3</h3>
    <body>
    </center>

    <cfform action="add1.cfm" method="post" id="addpage" name="addpage" onsubmit="return checkFields();">
    <center>
    R
    Richard_Herbert__UK_Author
    Inspiring
    January 2, 2007
    Thanks for all your thoughts.

    I obviously didn't explained myself well. What I'm looking for is to extend the functionality of the whole form submission rather than an individual element in the form.

    Dan is near the solution but not quite. The onSubmit function specified in the CFFORM would be the one called by the form submission rather than the one written dynamically by CFMX.

    I'm happy with most of the element validation provided by the \wwwroot\CFIDE\scripts\cfform.js file and I can write my own functions in the page as I need them. My prob is that the wrapper js function written by CFMX which calls the individual element validation functions that are in cfform.js will not include my custom written JS validation functions.

    What I would like to do is insert my JS function calls into that dynamic wrapper so that the combined JS alert would include my JS functions as well as the ones provided by CFMX.
    D
    Dan_Bracuk
    Inspiring
    December 29, 2006
    Write the appropriate function in a <script> tag. Call it like this:

    <cfform action="somepage.cfm" method="post" name="theform"
    onsubmit="return yourFunction(this);">
    A
    Anonymous
    December 19, 2006
    Personally I would use a regular select for that form field and write the javascript myself accordingly. Changing the CF stuff as BKB mentioned is going to affect EVERYTHING using CF on that server, IIRC. You very well may want to do that but I'd think thrice about it before doing so.
    BKBK
    Community Expert
    BKBKCommunity Expert
    Community Expert
    December 17, 2006
    > How can I extend the JavaScript validation offered by CFFORM?
    I think you could do so by tweaking the appropriate script in the Coldfusion system directory \wwwroot\CFIDE\scripts\. But you'll be taking some risks. Backup beforehand.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices