Jump to content

How customize red border (validation)


Mauri

Recommended Posts

I made a new component inherited from TUniEdit and would like to implement their own validation on the server side. Then on the server side when the onExit event is fired I want to validate some information and when some data is different from what I'm hoping I want the component stay with the red border showing that it is invalid. When invalid component should show the same color as the TUniNumberEdit component displays when the entered value is less than the MinValue property. 

 

 

post-4551-0-24682800-1476565160_thumb.png

 

 

 

 



unit ISComponetField;

interface

uses Classes, Vcl.Graphics, DesignIntf, Controls, DBCtrls, DB,
UniGUIClasses, UniGUIInterfaces, uniGUICoreInterfaces,
UniGUITypes, UniEdit;

type

TISField = class(TUniEdit)
private
...
procedure getExitEdit(Sender: TObject);
...
protected
procedure LoadCompleted; override;
public
...
published
...
end;

procedure Register;

implementation

procedure TISField.getExitEdit(Sender: TObject);
var
bValidate: boolean;
begin
bValidate:= true;
// Here I will do all my validations
...
if not bValidate then
begin
// Here I would like to call a method or change a property to display the field with a red border
end;
end;


procedure TISField.LoadCompleted;
begin
inherited;
OnExit:= getExitEdit;
end;

...




Best Regards,

 

 

Mauri

 

Member ID: 00404


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Link to comment
Share on other sites

Hi,

 

For now try this approach:

procedure TISField.getExitEdit(Sender: TObject);
var
  bValidate: boolean;    
begin
  bValidate:= true;    
  // Here I will do all my validations
  ... 
  if not bValidate then
  begin
   // Here I would like to call a method or change a property to display the field with a red border
   JSCall('inputEl.addCls', StrToJS('x-form-invalid-field'));
   JSCall('inputEl.set', [JSObject('"data-errorqtip":"your error message"')]);    
  end;
end;    

and for OnEnter :

  JSCall('inputEl.removeCls', StrToJS('x-form-invalid-field'));
  JSCall('inputEl.set', [JSObject('"data-errorqtip":""')]);

Best regards.

  • Upvote 1
Link to comment
Share on other sites

  • 1 year later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...