asked on

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>

_agx_

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

earwig75

ASKER

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?

ASKER CERTIFIED SOLUTION

_agx_

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

earwig75

ASKER

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.

_agx_

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.

_agx_

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.">

earwig75

ASKER

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

earwig75

ASKER

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

_agx_

Sorry, busy with work..

Yep, you figured it out. With "onValidate" you have to create your own logic inside the JS function :)