How to show one message when validation of several required fileds fails

[Blackmore111]

Hello.

I'm using ColdFusion 9 and I have a question.

When we have a form with required fields coded like this:

<cfinput ... required="yes" message="Enter a value 1" />

<cfinput ... required="yes" message="Enter a value 2" />

<cfinput ... required="yes" message="Enter a value 3" />

When user sumbits this form he will se an alert window:

Enter a value 1

Enter a value 2

Enter a value 3

How can I make it other way so then one single message is outputted like:

"Enter values for all required fields"

Not one message for each required field.

Sorry for my imperfect English. Thank you.

[BKBK · Accepted solution]

I don't think the automatic validation built into cfinput will allow you to do that. You should create your own validation. Here is an example to get you started:

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

    function validate() {

        // the values of the required fields

        var a_val = document.getElementById("a_id").value;

        var b_val = document.getElementById("b_id").value;

        var c_val = document.getElementById("c_id").value;

        // trim any leading and trailing spaces

        a_val = a_val.replace(/^\s+|\s+$/g,'');

        b_val = b_val.replace(/^\s+|\s+$/g,'');

        c_val = c_val.replace(/^\s+|\s+$/g,'');

        // validate

        if(a_val=='' || b_val=='' || c_val=='') {

                alert('You must enter values for the required fields a, b and c');

                return false;

        }

        else

        return true;

    }

</script>

<cfif isdefined("form.sbmt")>

<cfdump var="#form#">

</cfif>

<cfform onsubmit="return validate()">

a:<cfinput name="a" id ="a_id" type="text">

b:<cfinput name="b" id ="b_id" type="text">

c:<cfinput name="c" id ="c_id" type="text">

<cfinput name="sbmt" type="submit" value="send"/>

</cfform>

This is just a basic validation script to illustrate the principle. You may of course make it as sophisticated as you want, or even import specialized Javascript libraries to do the validation for you.

[Blackmore111]

Thank you very much, that's the very thing I needed.

[Blackmore111]

So, thanks to BKBK, I created an universal solution to this. Here it goes if anyone'll need it.

Here is cffunction that generates validation code:

cffunction name="generate_validation" access="public" returntype="string">

                    <cfargument name="fieldList" type="string" required="yes">

          <cfoutput>

                    <cfsavecontent variable="scr">

          function validate() {

        <cfloop list="#fieldList#" index="i">

          var val_#i# = document.getElementById("#i#").value;

          val_#i# = val_#i#.replace(/^\s+|\s+$/g,'');

          if (val_#i# == '')

          {

           document.getElementById("#i#").focus();

           alert('Please fill all required fields!');

           return false;

          }

        </cfloop>

        return true;

    }

</cfsavecontent>

</cfoutput>

                    <cfreturn scr>

          </cffunction>

And it works from .cfm page like this:

<cfinvoke component="iCFC.udfs" method="generate_validation" returnvariable="scr" fieldList="name,image,code,manual_create_order" />

<cfoutput>

    <script>

        #scr#

    </script>

</cfoutput>

  <cfform onsubmit="return validate()" action="contents/service/process_service.cfm" name="fProcess" method="post" >