Frederick Posted November 10, 2023 Share Posted November 10, 2023 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) Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 10, 2023 Share Posted November 10, 2023 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? Quote Link to comment Share on other sites More sharing options...
Frederick Posted November 10, 2023 Author Share Posted November 10, 2023 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; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 10, 2023 Share Posted November 10, 2023 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; } Quote Link to comment Share on other sites More sharing options...
Frederick Posted November 10, 2023 Author Share Posted November 10, 2023 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; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 10, 2023 Share Posted November 10, 2023 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. Quote Link to comment Share on other sites More sharing options...
Frederick Posted November 10, 2023 Author Share Posted November 10, 2023 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! Quote Link to comment Share on other sites More sharing options...
Sherzod Posted November 10, 2023 Share Posted November 10, 2023 Happy programming! 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.