Skip to main content
Inspiring
February 10, 2011
Answered

cfinput & onValidate

  • February 10, 2011
  • 2 replies
  • 2187 views

The boss wants to see client-side validation before the form is submitted.  I understand this can be done with the onValidate option of the cfinput, but for the life of me I can't get it to work.

Here's the plot:  The Return Date (if populated) must be equal to or greater than the Out Date.  the "#idx#" is because the entry is looped in a table (currently 56 entries).  Here's the pertinent code sections:

<script language="JavaScript" type="text/javascript">

      function testdate( ){
            alert("Called");
            if (document.out_of_office.retdate_#idx# < document.out_of_office.outdate_#idx#)
            {
                  return false;
            }
            else
            {
             return true;
            }
      }

</script>

...

<cfform name="out_of_office" action="index.cfm?fuseaction=update_out_of_office">
...

      <cfinput type="text" name="retdate_#idx#" id="retdate_#idx#" maxlenth="10" size="6" value="01/01/0001"
       onvalidate="testdate" message="Return Date must be equal to or greater than Out Date."
                         validateAt="onBlur,onSubmit">
...

I never get the alert box and I always end up in my action page (fuseaction=update_out_of_office).  What am I doing wrong?

    This topic has been closed for replies.
    Correct answer -__cfSearching__-

    Yeah, they've been having some problems with the forum this week.

    I broke this down into a single entry screen to simplify testing.  I finally got the javascript to work but only when I click the submit button.  While this works for one date, it isn't going to work on a data entry screen with a possible 112 dates!

    OnBlur doesn't seem to work at all.  Is this a known Coldfusion problem?

    To continue with the test, however, I don't care about date 1 until date 2 is entered.  So my date 1 input doesn't have the onvalidate or validateat parameter; I leave that to date 2 so that when it is populated, that triggers the comparison.  The question is:  within the validating javascript, can I pull in date 1 field?  The "value" in the function "function testdate(form, ctrl, value) {" refers to date 2.  How would I pull in date 1?


    The "value" in the

    function "function testdate(form, ctrl, value) {" refers to

    date 2.  How would I pull in date 1?

    Since you are using the same naming convention extract the "id" from the field object ie "ctrl.id". Then split the string on "_" to grab the dynamic counter ie #idx#. Then use DOM syntax to grab your second field

    ie var date2 = document.getElementById('outdate_'+ counterValue);

    2 replies

    Inspiring
    February 11, 2011

    Apparently the forum ate my previous response ...

    >       function testdate( ){

    It is not immediately obvious, but with html forms the validation function must have a specific signature:

       http://livedocs.adobe.com/coldfusion/8/validateData_11.html
       function yourFunctionName(form_object, input_object, object_value) {
          //...
       }

    CF  automatically passes three values to the function: form object, input  object and the input value. Since your field id's are dynamic, you could  extract the "id" from the input object and use it to determine the  corresponding "outdate" id.


    >   if (document.out_of_office.retdate_#idx# < document.out_of_office.outdate_#idx#)

    You are also missing the object value . You want also want to implement more robust date logic.

    Inspiring
    February 11, 2011

          function testdate( ){

    It is not immediately obvious, but the validation function must have a specific signature:

    http://livedocs.adobe.com/coldfusion/8/validateData_11.html

    function yourFunctionName(form_object, input_object, object_value) {

    //...

    }

    CF automatically passes three values to the function: form object, input object and the input value. Since your field id's are dynamic, you could extract the "id" from the input object and use it to determine the corresponding "outdate" id.

    Inspiring
    February 12, 2011

    Interesting ...my original response via email shows up a full day later.

    sockerdadAuthor
    Inspiring
    February 14, 2011

    Yeah, they've been having some problems with the forum this week.

    I broke this down into a single entry screen to simplify testing.  I finally got the javascript to work but only when I click the submit button.  While this works for one date, it isn't going to work on a data entry screen with a possible 112 dates!

    OnBlur doesn't seem to work at all.  Is this a known Coldfusion problem?

    To continue with the test, however, I don't care about date 1 until date 2 is entered.  So my date 1 input doesn't have the onvalidate or validateat parameter; I leave that to date 2 so that when it is populated, that triggers the comparison.  The question is:  within the validating javascript, can I pull in date 1 field?  The "value" in the function "function testdate(form, ctrl, value) {" refers to date 2.  How would I pull in date 1?