How To Change Border Colour And Set Hint For TUniDBEdit?

[Frederick]

I would like to change the border colour to clRed and display a hint when the mouse cursor is over the control when there is a validation error for TUniDBEdit.

Is this possible? The form's AlignmentControl property is uniAlignmentClient.

Note: I have referred to http://forums.unigui.com/index.php?/topic/7338-how-customize-red-border-validation/ but I don't know how to get it to work.

--
Frederick
(UniGUI Complete - Professional Edition 1.95.0.1575)
 

[Sherzod]

Hello,

16 minutes ago, Frederick said:

when the mouse cursor is over the control

Actually, this should work when saving or losing focus.

17 minutes ago, Frederick said:

validation error for TUniDBEdit

What are the validation conditions? Can you provide more details?

[Frederick]

I can see the hint "your error message" when I hover the mouse over the control but I can't get the control's border to be red.

I added the following in the UniServerModule's CustomCSS property:-

.x-form-invalid-field {
    border-color: red;
}
 

I tested using the OnExit event only.

procedure TUniForm.edtTestExit(Sender: TObject);
begin
   edtTest.JSInterface.JSCall('inputEl.addCls', StrToJS('x-form-invalid-field'));
   edtTest.JSInterface.JSCall('inputEl.set', [edtTest.JSInterface.JSObject('"data-errorqtip":"your error message"')]);
end;
 

[Sherzod]

20 minutes ago, Frederick said:

.x-form-invalid-field {
    border-color: red;
}

Okay, try this modified CSS:

.x-form-invalid-field {
    border-color: red;
    border-width: 1px;
    border-style: solid;
}

 

[Frederick]

Thanks. The modified CSS works.

Another thing is, how do I change the "your error message" to something I specify at runtime?

Doing the following results in no hint shown:-

var
   cVarmsg : String;
begin
   cVarmsg:='You did not enter a value';
   edtTest.JSInterface.JSCall('inputEl.set', [edtTest.JSInterface.JSObject('"data-errorqtip":"'+cVarmsg+'"')]);
end;

[Sherzod]

29 minutes ago, Frederick said:

edtTest.JSInterface.JSCall('inputEl.set', [edtTest.JSInterface.JSObject('"data-errorqtip":"'+cVarmsg+'"')]);

Yes it may not work if the field has validation and you removed the css class x-form-invalid-field.

[Frederick]

Upon further testing, it seems to be working.

In my actual application, cVarmsg is passed as a parameter and due to some control checks, cVarmsg was passed as a blank value and that is why "data-errorqtip" was showing a blank value, which is correct.

Thanks again. You have been a great help!

[Sherzod]

Happy programming!