Focus does not return to cftextarea when validation fails

I have a CFTEXTAREA like the below. When validation fails, the focus does not return to that field. The focus works on all other inputs except for the text area. Does anyone know how I can fix this? Thank you.

<cftextarea rows="4" cols="50" name="theNumbers" id="theNumbers" required="yes" message="The numbers are required." value=""></cftextarea>
earwig75Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

_agx_Commented:
AFAIK, you can't.  The only option is to switch to using a "text" field OR roll your own validation.

Not sure what version you're using, but if you look at the generated JS code in CF10 you'll see the reason why is it only triggers the focus event for text fields:

 
// set focus to first form error, if the field supports js focus().
if( _CF_this[_CF_FirstErrorField].type == "text" )
{ _CF_this[_CF_FirstErrorField].focus(); }

Open in new window

0
earwig75Author Commented:
I did see that; I was hoping someone had a work around. Do you know if it's possible to have a custom validation bundled with the built in one and show up in the same alert box?
0
_agx_Commented:
I almost never use the cfform stuff, but notice how when you use a cfform some of the JS is included via files:

<script type="text/javascript" src="/cfusion/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/cfusion/CFIDE/scripts/masks.js"></script>

But the validation is all inline:

<script type="text/javascript">
<!--
    _CF_checkx = function(_CF_this)
    {
        .....
        if( _CF_error_exists )
        {
            if( _CF_error_messages.length > 0 )
            {
                // show alert() message
                _CF_onErrorAlert(_CF_error_messages);
                // set focus to first form error, if the field supports js focus().
                if( _CF_this[_CF_FirstErrorField].type == "text" )
                { _CF_this[_CF_FirstErrorField].focus(); }

            }
            return false;
        }else {
            return true;
        }
    }
//-->
</script>

Open in new window


The files can be modified, but the inline stuff can't.  AFAIK the inline stuff is not exposed anywhere.  

You can add your own form validation function, but it would be called after the CF validation functions.

The one thing you could try is using onValidate.You create a custom javascript function that takes 3 parameters:  form object, input object, value (string) - and put the logic and focus call inside that function.  The function must have those 3 parameters and must return true/false (true means the field value is valid).

<script type="text/javascript">
// do not change the signature or it will not work
function yourFunction(form_object, input_object, object_value) { 
       // put your logic here... 
       input_object.focus();
       // return true if valid, otherwise false
}     
</script>

<cfform>
<cftextarea name="someField" onValidate="yourFunction">
....
</cfform>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Cloud Class® Course: Microsoft Windows 7 Basic

This introductory course to Windows 7 environment will teach you about working with the Windows operating system. You will learn about basic functions including start menu; the desktop; managing files, folders, and libraries.

earwig75Author Commented:
I need the alert for the text area to be in the same message box as the others, I don't think this will allow it. Thanks for always being so helpful.
0
_agx_Commented:
Did you try it? I can't test it right now, but since it's using core CF functionality, it should be part of the main messagebox.  Since the other stuff generates inline code, which you can't modify, using onValidate is the only possibility here.
0
_agx_Commented:
EDIT:
Hm... you may need to add back the "message" text, like you had in the original code (which uses "required" instead).  I think that's where CF gets the alert text from...

        <cftextarea name="someField" onValidate="yourFunction" message="The numbers are required.">
0
earwig75Author Commented:
I must be doing something wrong, I can't get it to fire at all. Can you help me understand what the script needs? I am trying to make it only require that at least 10 characters are entered in this field.

Below is my form tags and text area.

<cfform action="confirm.cfm" name="myForm" method="post" >
<cftextarea rows="4" cols="50" onValidate="checkTA"  name="theNumbers" id="theNumbers" required="yes" message="The numbers is a required field." value=""></cftextarea>
</cfform>

Open in new window

0
earwig75Author Commented:
I have it working. I am using the below with the onvalidate. Thank you for pointing me in this direction!

<script type="text/javascript">
<!-- 
    // Regular expression used for pattern matching. 
    var aNumber = /^\(\d{3}\) ?\d{3}( |-)?\d{4}|^\d{3}( |-)?\d{3}( |-)?\d{4}/; 
    /* 
		The function specified by the onValidate attribute. 
    */ 
    function checkNums(form, ctrl, value) { 
        if (value.length < 10 || value.search (aNumber) == -1)  
        { 
		ctrl.focus();
        	return (false); 
        }  
        else 
        { 
            return (true); 
        }  
    } 
//--> 
</script> 

Open in new window

0
_agx_Commented:
Sorry, busy with work..

Yep, you figured it out. With "onValidate" you have to create your own logic inside the JS function :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ColdFusion Language

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.