PDA

View Full Version : Style of Validation Error Message



shane.miller
15 Sep 2009, 12:49 PM
Hello, I am trying to change the style an error message for a TimeField. Currently, when the field is invalid, the error displays as red squiggely line under the field with a balloon to the right of the field.

http://img182.imageshack.us/img182/9410/errorwithsquiggley.png

What I would like to do is remove the red squiggely line and display only the balloon.

http://img182.imageshack.us/img182/2521/errorwithoutsquiggley.png

My Code:


var timeField = new Ext.form.TimeField({
increment: 1,
renderTo: "scheduledTime",
hiddenName: "scheduledTime",
allowBlank: false,
value:"${startTimeValue}"
});
timeField.on('invalid', function() {
Ext.getDom("saveButton").disabled = true;
});
timeField.on('valid', function() {
Ext.getDom("saveButton").disabled = false;
});



Could someone point me in the right direction? Thanks! :D

shane.miller
15 Sep 2009, 9:19 PM
What I forgot to mention: I do know that I could modify the x-form-invalid css class and remove the background property to get rid of the red squiggle. I would like to clarify that what I am searching for is a solution using the API.


.x-form-invalid, textarea.x-form-invalid {
background:#fff url(../images/default/grid/invalid_line.gif) repeat-x bottom;
border: 1px solid #dd7870;
}Thanks!

vabenzo
25 Sep 2009, 7:51 AM
I would like help with this too.

Can someone tell me where to make that mod or change?

Thank you in advance

V

Condor
25 Sep 2009, 8:00 AM
You can't do this with code, you'll have to use css, e.g.

.x-form-invalid, textarea.x-form-invalid {
background-image:url(../images/default/form/text-bg.gif);
border-color:#b5b8c8;
}

vabenzo
25 Sep 2009, 8:08 AM
Ok.

We found a way to get rid of squiggly red line.

It may not be the right way but visually it worked.


go to ext3/resources/images/default/grid/invalid_line.gif

I simply made that gif a transparent blank image.

Tada! No more squiggly red line.


If anyone knows the true programming way I would love to know it.

Thanks

Condor
25 Sep 2009, 8:09 AM
Can you explain why you don't want to add the mentioned css rule to your own stylesheet?

vabenzo
25 Sep 2009, 9:03 AM
Can you explain why you don't want to add the mentioned css rule to your own stylesheet?

New to this. Really dont know how?

Would love to know... if you have time :)

Condor
25 Sep 2009, 9:05 AM
Basic HTML/CSS knowledge:

Create a file called mystylesheet.css and put in:

.x-form-invalid, textarea.x-form-invalid {
background-image:url(../images/default/form/text-bg.gif);
border-color:#b5b8c8;
}

Next, in your .html add:

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="mystylesheet.css" />

vabenzo
25 Sep 2009, 10:11 AM
Basic HTML/CSS knowledge:

Create a file called mystylesheet.css and put in:

.x-form-invalid, textarea.x-form-invalid {
background-image:url(../images/default/form/text-bg.gif);
border-color:#b5b8c8;
}Next, in your .html add:

<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="mystylesheet.css" />

Cool. Thank you. :)