Validate a text input field for inline styles using regex?

Question

I have a simple text field which I need to validate with a regex.
The text field is supposed to contain inline-styles in the "proper" format xxx: xxx;

Ex: font-size: 15px; background: #33333; -webkit-transition: background-color 500ms ease-out 1s;

Any regex gurus out there help me out here. I'll eventually find the solution on my own but that may take awhile.

Languages would be javascript for client side validation then moving onto php for the server side validation.

Thanks a bunch guys... I came up with this -- /([a-z-]+: [0-9a-z#(). -]+;$)/g --. I would answer myself but I'm unsure if its the best solution.

Gonna accept the most detailed answer below from @nu11p01n73R as I stole the $ sign from his explanation that made the above work right.

Now is there an issue with what I came up with? Know I'm not technically supposed to ask but I think its easier to read for me to read, anyways. I love SO.

Is that example a singl input or different inputs. Give an example which should not be validatede — nu11p01n73R
– nu11p01n73R, Commented Nov 11, 2014 at 17:42
[a-z-]+: matches the first part of it... its a single input it should match only the format above as many times as needed to allow the user to add multple inline styles. I only care about ensuring the format of the styles... not if they are an actual style... thats on them. — Robert Ruby II
– Robert Ruby II, Commented Nov 11, 2014 at 17:46

nu11p01n73R · Accepted Answer · 2014-11-11 17:58:20Z

1

You can use a regex of the form

^([^:]+:[^;]+;)+$

see for example http://regex101.com/r/cE6yS6/3

^ anchors the regex at the begining of the string. ensures that nothing presceds the matched string
[^:]+: matches anything other than : followed by a :
[^;]+; matches anything other than ; followed by ;
+ quantifier, repeats the occurence of property:value;
$ anchors the regex at the end of the string. Ensures nothing follows the matches string.

edited Nov 11, 2014 at 17:58

answered Nov 11, 2014 at 17:48

nu11p01n73R

26.8k3 gold badges42 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

2 revs · Accepted Answer · 2014-11-11 18:51:37Z

0

try this better solution :

^([a-zA-Z\-\s]+:[a-zA-Z0-9\-\s#%\(\)\+']*;)+$

it handles exception case:

ex1=font-size: 15px; background: #33:333; //not match
ex2=font-size: 15px; background: #33333;  //match

for html:

<input type="text"  pattern="^([a-zA-Z\-\s]+:[a-zA-Z0-9\-\s#%\(\)\+']*;)+$" style="width: 1000px;"/>

edited Nov 11, 2014 at 18:51

community wiki

2 revs
Ahosan Karim Asik

4 Comments

Robert Ruby II Over a year ago

I'll give that a try real quick n get back to ya

Robert Ruby II Over a year ago

Your solution works but the solution I posted above in my questions also works just as well but I think it is easier to read. Thanks though man. I know how it is trying to answer questions on here. I still am going to keep the answer previously accepted as it defines what the 'moving parts' are doing and I don't want to keep checking back to continually update acceptance. Cheers and thanks again.

Ahosan Karim Asik Over a year ago

previous ans sometimes no works, which is said in exception case: in my ans.

Sarout Over a year ago

this solution only works in forms at submit

Collectives™ on Stack Overflow

Validate a text input field for inline styles using regex?

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related