View Issue Details

This bug affects 1 person(s).
 14
IDProjectCategoryView StatusLast Update
05823Bug reportsSurvey takingpublic2012-03-14 21:08
Reportertfj Assigned ToTMSWhite  
PrioritynormalSeverityminor 
Status closedResolutionfixed 
Product Version1.92RC4 
Target Version1.92RC5Fixed in Version1.92RC5 
Summary05823: Confusing message to users for questions with regular expression validation
Description

I think someone else may have mentioned this in an earlier bug report, but I have not been able to find it and I apologize. At any rate, it still exists.

Just to cite one example, I have a question that uses a regular expression for validation. (There are several other questions like it throughout our surveys.)

In the display of the question, the following appears:

Each answer must conform to this regular expression: /^\d{ 3 }-\d{ 2 }-\d{ 4 }$/

This is going to be confusing to our users who will have no idea what this means.

In the Advanced Settings for the question, and the "Hide Tip" option is set to "Yes."

Steps To Reproduce

Add a regular expression to the Validation of a question.

TagsNo tags attached.
Attached Files
template.css (15,410 bytes)   
/* Start reset CSS */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
        margin:0;
        padding:0;
    }
    table {
        border-collapse:collapse;
        border-spacing:0;
    }
    fieldset,img { 
        border:0;
    }
    address,caption,cite,code,dfn,em,strong,th,var {
        font-style:normal;
        font-weight:normal;
    }
    ol,ul {
        list-style:none;
    }
    caption,th {
        text-align:left;
    }
    h1,h2,h3,h4,h5,h6 {
        font-size:100%;
        font-weight:normal;
    }
    q:before,q:after {
        content:'';
    }
    abbr,acronym { border:0;
    }
/* End reset CSS */

body.default {
    background-color:#FFF;
    font-size:12px;
    line-height:150%;
    font-family:Verdana,Arial,Helvetica,sans-serif;
    color:#1d2d45;
}

ul {
  list-style:disc inside;
}

ol {
  list-style:decimal inside;
}


h1 {
    font-size:1.5em;
    font-weight:bold;
    color:#328639;
    padding-top:15px;
}

h2 {
    font-size:1em;
    font-weight:bold;
    color:#328639;
    padding-top:5px;
}

h3 {
    font-size:1.3em;
    font-weight:bold;
    color:#1D2D45;
    padding-bottom:10px;
}


a:link,a:visited {
    color:#819d26;
    text-decoration:none;
}

.success {
    color:#00dd00;
    font-weight: bold;
}

.clearall {
    font-size:11px;
    padding-right:5px;
}

.answertext, .answer {
    text-align:left;
}

.array1 {
    font-family:verdana;
    font-size:11px;
    text-align:center;
    background-color:#fff;
}

.array2 {
    font-family:verdana;
    font-size:11px;
    text-align:center;
    background-color:#eee;
}

.arraycaptionleft {
    text-align:right;
}

/* Save All button */
.saveall {
    font-weight:400;
    font-size:10px;
    color:#000;
}

.asterisk {
    color:red;
    font-size:9pt;
    font-family:verdana;
    display:none;
}


td.graph
{
    background-color: #d2e0f2;
    padding: 0.2em 0%;
}
#progress-graph
{
    line-height: 1.5em;
    width: 17em;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0.2em;
    padding: 0.5em 0.5em 0.4em 1em;
    text-align: left;
}
.hide
{
    font-weight: normal;
    position: absolute;
    top: -9999px;
    left: -9999px;
}
#progress-graph div.zero
{
    width: 2.6em;
    margin-right: 0%;
}
#progress-graph div.graph
{
    width: 10em;
    height: 1.0em;
    border: 1px solid #000;
    margin-top: -1.2em;
    margin-left: 2.6em;
    margin-right: 0%;
}
#progress-graph div.cent
{
    width: 3em;
    margin-top: -1.5em;
    margin-left: 13.3em;
    margin-right: 0%;    
}

.printouttable {
width:100%;
}

.printouttable td {
border-color:#fff #fff #ddf;
border-style:solid;
border-width:1px;
}

.printouttable td:first-child {
background-color:#ddf;
font-weight:700;
text-align:right;
padding-right:5px;
padding-left:5px;
}

.printouttitle {
padding-right:5px;
padding-left:5px;
font-size:18px;
}

.surveytitle {
font-size:1.2em;
height:1.5em;
}

.surveytitle:hover {
text-decoration:underline;
color:#819d26;
}

.languagechanger {
font-size:1em;
}

.question,.answertext {
    font-family:verdana;
}



/* Basic formatting for the three keyparts of an question */
td.questiontext {
    font-family:verdana;
    font-size:12px;
    font-weight:bold;
    background-color: #eef6ff;
    text-align: left;
    padding:0.5em 1em;
}

td.answer {
    padding:0.5em 1.5em;          
}

td.questionhelp {
    font-size:10px;
    background-color:#eef6ff;
    padding-left:1em;
}

td.questionhelp img {
  margin:4px;
  padding-right:5px;
  vertical-align:middle;
  margin-left:0px;
}

/* End formatting for the three keyparts of an question */


.error, .errormandatory, .warningjs {
    font-size:12px;
    font-weight:700;
    color:RED;
}

table.question {
    margin: 0 auto;
}


table.question tr.array1:hover,table.question tr.array2:hover {
    background-color:#A7A9D1;
}


/* -------------------------------------------------
   START: Question styles  ------------------------- */

/* =====================================
== Full list of question classes =======

 .boilerplate
,.numeric
,.choice-5-pt-radio
,.yes-no
,.gender
,.date
,.numeric-multi
,.numeric
,.list-radio
,.list-radio-flexible
,.list-with-comment
,.list-dropdown
,.list-dropdown-flexible
,.ranking
,.numeric-multi
,.language
,.multiple-opt-comments
,.multiple-short-txt
,.text-short
,.text-long
,.text-huge
,.numeric-multi
,.array-5-pt
,.array-10-pt
,.array-yes-uncertain-no
,.array-increase-same-decrease 
,.array-flexible-row 
,.array-flexible-column 
,.slider 
,.array-multi-flexi 
,.array-multi-flexi-text
,.array-flexible-duel-scale 
*/

/* - - -  - - -  - - -  - - - - - -  - - -  - - - -
   START: General list styles - - -  - - -  - - - - */
 .choice-5-pt-radio ul
,.list-radio-flexible ul
,.list-radio ul
,.list-with-comment ul
,.multiple-opt ul
,.multiple-opt-comments ul
,.multiple-short-txt ul
,.numeric-multi ul
,.yes-no ul
,.gender ul {
    margin-left: 0%;
    padding-left: 0%;
}

 .choice-5-pt-radio .answer li
,.list-radio-flexible .answer li
,.list-radio .answer li
,.list-with-comment .answer li
,.multiple-opt .answer li
,.multiple-opt-comments .answer li
,.multiple-short-txt .answer li
,.numeric-multi .answer li
,.yes-no .answer li
,.gender .answer li {
    list-style-type: none;
    text-align: left;
    margin: 0% 0% 0.5em 0.5em;
}

/* END:  General list styles - - - -  - - -  - - - -
- - - - -  - - -  - - -  - - - - - -  - - -  - - - - */


/* STYLES NOT YET DEFINED - - - - -
.boilerplate {}
*/

 .choice-5-pt-radio ul
,.yes-no ul
,.gender ul
{
    text-align: left;
    font-size: 80%;
    margin-top: 0.5em;
    margin-left: 0%;
    padding-left: 0%;
}
 .choice-5-pt-radio ul li
,.yes-no ul li
,.gender ul li
{
    display: inline;
    padding: 0% 2em 0% 0%;
    margin-left: 0%;
}

/* STYLES NOT YET DEFINED - - - - -
.date {}
*/
.date p.question { margin-left: 1em; }
.date p.question select.day {}
.date p.question select.month {}
.date p.question select.year {}

 .date p.tip
,.numeric-multi p.tip
,.numeric p.tip {
    margin-left: 1.5em;
    font-size: 80%;
    font-style: italic;
    line-height: 150%;
}
.numeric p.question
{
    font-size: 80%;
    margin-left: 1em;
}
.numeric-multi ul
{
    font-size: 80%;
}

 .numeric-multi span
,.multiple-short-txt .question .answer ul li span
{
    font-size: 90%;
/*    font-style: italic;*/
}
 .numeric-multi p.tip.problem {
    color: #f30;
    font-weight: bold;
}

.numeric-multi input.tip.problem {
    background-color: #f30;
    border: 2px solid #7F9DB9;     
    font-weight: bold;
    color:#fff;
}



 .numeric-multi p.tip.good {
    color: #090;
    font-weight: bold;
}

.numeric-multi input.tip.good {
    background-color: #090;
    border: 2px solid #7F9DB9;     
    font-weight: bold;
    color:#fff;    
}

/* DEFINED ABOVE UNDER "General list styles" - - - - -
.list-radio-flexible
.list-radio
*/



.list-radio .answer li label {
    display:inline-block;
    width:85%;
}


.list-radio .answer li input { 
    vertical-align:top !important;
    margin-top:2px;
}


  ul.cols-2 , table.cols-2
, ul.cols-3 , table.cols-3
, ul.cols-4 , table.cols-4
, ul.cols-5 , table.cols-5
, ul.cols-6 , table.cols-6
, ul.cols-7 , table.cols-7
, ul.cols-8 , table.cols-8 {
    width: 98%;
    margin: 0% auto 0% auto;
}

  ul.cols-2 li , ul.cols-2-ul
, ul.cols-3 li , ul.cols-3-ul
, ul.cols-4 li , ul.cols-4-ul
, ul.cols-5 li , ul.cols-5-ul
, ul.cols-6 li , ul.cols-6-ul
, ul.cols-7 li , ul.cols-7-ul
, ul.cols-8 li , ul.cols-8-ul {
    float: left;
    padding: 0% 0.5em;
    white-space: normal
}

ul.cols-2 li , ul.cols-2-ul , table.cols-2 td { width: 48%; }
ul.cols-3 li , ul.cols-3-ul , table.cols-3 td { width: 30.5%; }
ul.cols-4 li , ul.cols-4-ul , table.cols-4 td { width: 23%; }
ul.cols-5 li , ul.cols-5-ul , table.cols-5 td { width: 19%; }
ul.cols-6 li , ul.cols-6-ul , table.cols-6 td { width: 15%; }
ul.cols-7 li , ul.cols-7-ul , table.cols-7 td { width: 13%; }
ul.cols-8 li , ul.cols-8-ul , table.cols-8 td { width: 11.5%; }

.list-dropdown-flexible p.question {
    margin-left: 1em;
}

/* STYLES NOT YET DEFINED - - - - -
.list-dropdown {}
*/
.list-with-comment div.list {
    width: 47%;
    float: left;
    padding: 0.5em 0.5em 0.5em 0%;
}

.list-with-comment p.select {
    width: 47%;
    float: left;
    padding: 0.5em;
    margin: 0%;
}

.list-with-comment div.list p {
    margin: 0% 0% 0% 1.1em;
    text-align: left;
}

.list-with-comment p.comment {
    margin: 0%;
    padding: 0.5em;
    text-align: left;
    float: left;
    width: 47%;
}

.list-with-comment p.comment textarea {
    width: 100%;
}


/* DEFINED ABOVE UNDER "General list styles" - - - - -
.multiple-opt
*/

.language {}

/* The following styles only apply to modern (relatively) complete CSS2 compliant browsers. (Not less than IE 8) */

 .multiple-opt-comments ul
,.multiple-short-txt ul
,.numeric-multi ul {
    display: table;
    padding: 0%;
    margin: 1em;
}

.numeric-multi .answer ul {    
    margin: 0% 1em 1.5em 1em;    
}


.numeric-multi .answer ul input {
     width:5em;
     padding:0px;
}

.numeric-multi ul.computed
{
    float:left;
    padding-right: 2em;
}
.numeric-multi ul.slider.computed
{
    width: 22em;
}
 .multiple-opt-comments ul li
,.multiple-short-txt ul li
,.numeric-multi ul li
{
    display: table-row;
}
.multiple-opt-comments ul li span.option
{
    display: table-cell;
    vertical-align: baseline;
}
.multiple-short-txt ul li label,
.numeric-multi ul li label
{
    padding: 0.3em 1em 0% 0%;
    display: table-cell;
    vertical-align: baseline;
}
.numeric-multi ul.computed li label,
.numeric-multi ul.slider.computed li label
{
    padding-right: 0%;
}

.multiple-opt-comments ul li span.comment
,.multiple-short-txt ul li span
,.numeric-multi ul li span
{
    padding: 0.3em 0% 0% 1em;
    display: table-cell;
    vertical-align: baseline;
    white-space: nowrap;
}
.multiple-opt-comments ul li span
{
    padding: 0.3em 1em 0% 0%;
}
.numeric-multi div.multinum-slider
{
    margin-top: 1.5em;
    width: 20em;
}

.numeric-multi ul.multiplenumerichelp.slider    {    display: table;    }
.numeric-multi ul.multiplenumerichelp.slider li    {    display: table-row;    }

.numeric-multi ul.multiplenumerichelp li label
,.numeric-multi ul.multiplenumerichelp.slider li label
{
    padding: 0.3em 0% 0% 0%;
    display: table-cell;
}
.numeric-multi ul.multiplenumerichelp li span
,.numeric-multi ul.multiplenumerichelp.slider li span {
    padding: 0% 0% 0% 0.3em;
    display: table-cell;
}

.numeric-multi li.multiplenumerichelp span input {

}


 .text-short input
,.text-long textarea
,.text-huge textarea {
    margin-left: 1em;
}

#limesurvey table.question thead th
,#limesurvey table.question .repeat th
{
    text-align: center;
    vertical-align: bottom;
    font-weight: normal;
}
#limesurvey .answer table.question tbody td
{
    text-align: center;
}
 #limesurvey table.question tbody th.answertext
,#limesurvey table.question tbody th.arraycaptionleft {
    text-align: right;
    font-weight: normal;
}

#limesurvey table.question tbody th.answertextright {
    text-align: left;
    font-weight: normal;
}

.array-flexible-column col.odd {
    background-color: #eee;
}

.boilerplate td td
,.numeric td td
,.choice-5-pt-radio td td
,.yes-no td td
,.gender td td
,.date td td
,.numeric-multi td td
,.numeric td td
,.list-with-comment td td
,.list-dropdown-flexible td td
,.ranking td td
,.numeric-multi td td
,.language td td
,.multiple-opt-comments td td
,.multiple-short-txt td td
,.text-short td td
,.text-long td td
,.text-huge td td
,.numeric-multi td td
,.array-5-pt td
,.array-10-pt td
,.array-yes-uncertain-no td
,.array-increase-same-decrease td
,.array-flexible-row td
,.array-flexible-column td
,.array-multi-flexi td
,.array-multi-flexi-text td
,.array-flexible-duel-scale td {
    text-align: left;
}

.ranking select
{
    min-width:140px;
    min-height:60px;
}


.ranking option
{
  padding-top:1px;
  padding-bottom:1px;
}

.choice-5-pt-radio li
{
    display: inline;
    margin-left: 0.5em;
} 

/* Jquery CSS
 */
/** UI Base **/
.ui-wrapper { 
    border: 1px solid #50A029; 
}
.ui-wrapper input, .ui-wrapper textarea { 
    border: 0; 
}
/** UI Slider **/
.ui-slider-handle { 
    position: absolute; 
    height: 23px; 
    width: 12px; 
    top: 0px; 
    left: 0px; 
    background-image: url(slider-handle.gif);  
}

.ui-slider-1 { 
    width: 200px; 
    height: 9px; 
    margin-bottom: 20px; 
}


.ui-slider-2 { 
    width: 200px; 
    height: 23px; 
    position: relative; 
    background-image: url(../../images/slider-bg-2.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
}

.slider_callout { 
    height: 20px; 
    width: 100px; 
    overflow: hidden; 
    position: absolute; 
    top: -19px; 
    margin-left:10px; 
    font-family: 'Arial'; 
    font-size: 9pt; 
    color: #284a6e; 
    font-weight: bold; 
    text-align: left;
}


table.outerframe {
    border-collapse:separate;
    border-spacing:1px;
    margin:20px auto 40px auto ;
    border:1px solid #BBC6CC;
}



p.surveydescription {
   margin-bottom:20px;
}

p.surveywelcome {
   margin-top:20px;
}

table.privacy {
    margin-top:20px;
}

td.privacynote{
    text-align:center;
    background-color:#eef6ff;
    font-size:0.8em;
    padding:5px;
}

input.submit {  
    padding:0 15px;
    margin:5px;
}

input.saveall {  
    padding:0 5px;
    margin:5px;
}

table.question {
  border-collapse:separate;
  border-spacing:2px;
  margin-bottom:20px;
}

table.question th {
  padding:4px 6px;
  border-collapse:separate;
  border-spacing:2px;
  font-size:11px;
}

table.question thead th {
   font-weight:600 !important;
}

table.question td {
  padding:4px 4px;
  border-collapse:separate;
  border-spacing:2px;
}


table.question input {
    vertical-align:middle;
}


p.question {
margin-top:10px;
margin-bottom:10px;
}

p.tip {
 margin-top:10px;
 margin-bottom:10px;
}

td.answer li label,
td.answer li input  {
 vertical-align:middle;
}

.rank input {
  margin:1px 1px;
}

.ranking td.answer {
    padding-left:10px;
}

td.rank label, td.rank td strong {
 font-size:0.9em;
 font-weight:bold;
}



.list-dropdown select {
  margin-left:10px;
}

 .choice-5-pt-radio ul {
  margin-bottom:10px;
}


.text-long textarea, .text-huge textarea {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
}


#loadtable td, #savetable td {
    padding-top:5px;
    padding-left:3px;
}

#loadbutton, #savebutton {
    padding:0 10px;
}


#tokenform {
  margin-top:1em;
}

#tokenform input {
}

#tokenform label {  
float: left;  
width: 20em;  
margin-right: 0.5em;  
text-align: right;
}

#tokenform li {
    list-style-type: none;
}

#tokenform li {
  padding-bottom:5px;
}

#tokenform img {
  margin-bottom:-5px;
  margin-right: 5px;
}


p#tokenmessage {
  margin:20px;
}


p#tokenmessage {
  margin:20px;
  text-align:center;
}


div#wrapper {
  width:600px;
  margin:0 auto;
}


#tokenform input.submit {
 margin-left:18em;
 margin-top:1em;
 margin-bottom:1em;
}

.yes-no td.answer {
    padding-bottom:10px;
}

/* copied from TMSWhite from bug tracker # 05823*/

div.em_regex_validation {
  display: none;
}
div.em_regex_validation.good {
  color: green;
}
div.em_regex_validation.error {
  color: #FF00FF;
}

.input-error span.hide-tip div.error {
    color: red;
    display: block;
}

.input_error div.em_regex_validation {
    display: none;
}
template.css (15,410 bytes)   
Bug heat14
Complete LimeSurvey version number (& build)12453
I will donate to the project if issue is resolvedNo
BrowserFirefox
Database type & version10.0.1
Server OS (if known)Test PC with Windows XP Professional (32 bit)
Webserver software & version (if known)Apache 2.2.12
PHP Version5.3.0

Relationships

has duplicate 05847 closedTMSWhite Validation error message returns validation equation rather than plain-language message 

Users monitoring this issue

There are no users monitoring this issue.

Activities

TMSWhite

TMSWhite

2012-02-15 16:50

reporter   ~17456

this is actually fixed already via CSS styles. If you look in templates.css in any of the template folders, you will see lines like these:

div.em_regex_validation {
display: none;
}
div.em_regex_validation.good {
color: green;
}
div.em_regex_validation.error {
color: #FF00FF;
}

and this:

.input-error span.hide-tip div.error {
color: red;
display: block;
}

You can use these to ensure that regex validation message never appear, if you so choose. For example:

.input_error div.em_regex_validation {
display: none;
}

tfj

tfj

2012-02-15 20:50

reporter   ~17457

I have a handful of older templates that have worked for the past couple of years. I copied your lines to the bottom of one of my templates. I still get the same display on the question:

Each answer must conform to this regular expression: /^\d{ 3 }-\d{ 2 }-\d{ 4 }$/

However, if I copy the following lines into the default template.css (and change the template to "default" in the survey):

.input_error div.em_regex_validation {
display: none;

I don't get the display at the first, but if I purposely make an incorrect entry, I do. This displayed message ("Each answer must conform to this regular expression: /^\d{ 3 }-\d{ 2 }-\d{ 4 }$/") will not be helpful to the user.

I am certain that I am making an error in adding the lines to the template.css files. Personally, I think that the default should be that the error message for regular expressions should never appear to the user, unless the survey designer does some modifications. Maybe I'm the only one who feels this way, though.

I am attaching my template.css file from my old template, for your convenience and advice. The lines I copied are at the end.

tfj

tfj

2012-02-15 20:55

reporter   ~17458

As an addendum to my previous note, maybe a generic error message would be more helpful. Something along the lines of "Please check the format of your answer." That way the user (survey taker) would not be confronted with an indecipherable error message.

TMSWhite

TMSWhite

2012-02-16 18:04

reporter   ~17473

So, the options are:
(1) never show a message that shows the regular expression equation (perhaps instead using the generic message you mention).
(2) generate it, but use CSS styling to let authors decide whether or not to show it.

tfj

tfj

2012-02-16 18:11

reporter   ~17474

My preference would be the generic, more user-friendly message that displays only upon an error for the questions where a regular expression is used for validation.

I could go with either option, though.

Thank you for considering this.

tpartner

tpartner

2012-02-16 20:17

partner   ~17480

My 2 cents...

I would like to see the generic message too. I don't see a need to ever show the regex - it would be meaningless to 99.9% of respondents.

c_schmitz

c_schmitz

2012-02-17 15:32

administrator   ~17490

Generic message is fine, no regex display needed.

TMSWhite

TMSWhite

2012-02-17 17:09

reporter   ~17492

OK, I'll do generic message.
I'll also change the em_validation_q and em_validation_sq to not show regex messages.

TMSWhite

TMSWhite

2012-02-17 18:48

reporter   ~17494

Fixed in revision https://github.com/LimeSurvey/LimeSurvey/commit/2eec4a30b514ba8ad6d57592495554c851128775

tfj

tfj

2012-02-17 19:08

reporter   ~17497

Thank you for all of your work!

Unless there is a way for me to test this beforehand, I'll wait for RC5.

tfj

c_schmitz

c_schmitz

2012-02-26 14:21

administrator   ~17650

1.92RC5 release

Related Changesets

LimeSurvey: Yii 52fccc5d

2012-02-17 08:16:34

TMSWhite

Details Diff
Fixed issue 05823: Confusing message to users for questions with regular expression validation Affected Issues
05823
mod - application/helpers/expressions/em_manager_helper.php Diff File

Issue History

Date Modified Username Field Change
2012-02-15 16:01 tfj New Issue
2012-02-15 16:50 TMSWhite Note Added: 17456
2012-02-15 20:50 tfj Note Added: 17457
2012-02-15 20:51 tfj File Added: template.css
2012-02-15 20:55 tfj Note Added: 17458
2012-02-16 13:16 Mazi Assigned To => TMSWhite
2012-02-16 13:16 Mazi Status new => assigned
2012-02-16 18:04 TMSWhite Note Added: 17473
2012-02-16 18:11 tfj Note Added: 17474
2012-02-16 20:17 tpartner Note Added: 17480
2012-02-17 15:32 c_schmitz Note Added: 17490
2012-02-17 17:09 TMSWhite Note Added: 17492
2012-02-17 18:45 TMSWhite Target Version => 1.92RC5
2012-02-17 18:48 TMSWhite Note Added: 17494
2012-02-17 18:48 TMSWhite Status assigned => resolved
2012-02-17 18:48 TMSWhite Fixed in Version => 1.92RC5
2012-02-17 18:48 TMSWhite Resolution open => fixed
2012-02-17 19:08 tfj Note Added: 17497
2012-02-22 22:08 TMSWhite Relationship added has duplicate 05847
2012-02-26 14:21 c_schmitz Note Added: 17650
2012-02-26 14:21 c_schmitz Status resolved => closed
2012-03-14 21:08 TMSWhite Changeset attached => Import 2012-03-09 13:30:34 Yii 52fccc5d