Link to home
Start Free TrialLog in
Avatar of Quack
QuackFlag for United States of America

asked on

Regex not working with style="text-transform:uppercase"

I have a report that works with a regex and validates well enough w/ the regex. The client is asking to force the date field to be all caps though. I can add the style -  style="text-transform:uppercase" - to force this but when I do it throws an error. Anyone have any idea why this would happen? code below:
<cfinput type="text" 
                                          name="period" 
                                          validate="regex"
                                          pattern="^(JAN|FEB|MAR|APR|JUN|JUL|AUG|SEP|OCT|NOV|DEC)-(19|20)[0-9]{2}$" 
                                          message="Please enter the Accounting Period in the correct format, i.e. MON-YYYY." 
                                          required="true"
                                          id="period"
                                          class="Headline12DrkBlu" 
                                          size="10" 
                                          maxlength="8"
                                          default="#period#">

 But if you add the style to force the all caps it errors out: 

            <cfinput type="text" 
                                          style="text-transform:uppercase"
                                          name="period" 
                                          validate="regex"
                                          pattern="^(JAN|FEB|MAR|APR|JUN|JUL|AUG|SEP|OCT|NOV|DEC)-(19|20)[0-9]{2}$" 
                                          message="Please enter the Accounting Period in the correct format, i.e. MON-YYYY." 
                                          required="true"
                                          id="period"
                                          class="Headline12DrkBlu" 
                                          size="10" 
                                          maxlength="8"
                                          default="#period#"> 

Open in new window

Avatar of HainKurt
HainKurt
Flag of Canada image

when I do it throws an error.

can you share that error with us :)

issue may be UPPERCASE is just visual, fake,

If you enter "Dec", you see "DEC" but regex uses value "Dec", so it throws the message...
Avatar of Quack

ASKER

it posts the validation message and won't allow me to continue - Please enter the Accounting Period in the correct format, i.e. MON-YYYY.

not the best choice of words...error I mean...the regex is catching it even though its posting all caps. so you're saying its not really all caps? how can I work it to fix that?
adding this ugly thing may work :)

onkeypress="javascript:this.value=this.value.toUpperCase();"

Open in new window


or this one is better

onkeyup="javascript:this.value=this.value.toUpperCase();"

Open in new window


or obblur

onblur="javascript:this.value=this.value.toUpperCase();"

Open in new window

see this demo

https://jsfiddle.net/HainKurt/4wLdqd9p/

adding a style

.uppercase {
  text-transform: uppercase;
}

Open in new window


+ one of those solutions above is what you need...
ASKER CERTIFIED SOLUTION
Avatar of Quack
Quack
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Quack

ASKER

(UPPER('#form.period#')) vs. '#form.period#' within in the code converts to upper case which fixes the issue ... I pulled the regex completely out of the form field which removed the conflict.