How customize red border (validation)

[Mauri]

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. 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Sherzod]

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.

[Mauri]

Worked perfectly !!! Congratulations you are very good technically and has a fantastic knowledge.

[bbm]

Hi,

 

which unit is needed for "StrToJS"?

 

Best regards

[Sherzod]

Hi,

 

ExtPascalUtils

 

Best regards,

[bbm]

Hi,

 

thank you for your quick support.

 

Best regards

[Burhorst]

Hallo I use the following Code for Desktop and it works fine:

procedure TCPDLoginForm.EditMailChange(Sender: TObject);
var
  LEdit: TUniEdit;
begin
  if not(Sender is TUniEdit) then
    Exit;
  LEdit := Sender as TUniEdit;
  if IsMailAddress(LEdit.Text) then
  begin
    LEdit.JSInterface.JSCall('inputEl.addCls', StrToJS('x-form-valid-field'));
    LEdit.JSInterface.JSCall('inputEl.removeCls', StrToJS('x-form-invalid-field'));
    LEdit.JSInterface.JSCall('inputEl.set', [LEdit.JSInterface.JSObject('"data-errorqtip":""')]);
    LEdit.Tag := 1;
  end
  else
  begin
    LEdit.JSInterface.JSCall('inputEl.addCls', StrToJS('x-form-invalid-field'));
    LEdit.JSInterface.JSCall('inputEl.removeCls', StrToJS('x-form-valid-field'));
    LEdit.JSInterface.JSCall('inputEl.set', [LEdit.JSInterface.JSObject('"data-errorqtip":"Die E-Mail-Adresse ist nicht korrekt"')]);
    LEdit.Tag := 0;
  end;
end;

I try the following Code for Mobile:

procedure TCPMLoginForm.EditMailChange(Sender: TObject);
var
  LEdit: TUnimEdit;
begin
  if not(Sender is TUnimEdit) then
    Exit;
  LEdit := Sender as TUnimEdit;
  if IsMailAddress(LEdit.Text) then
  begin
    LEdit.JSInterface.JSCall('inputEl.addCls', StrToJS('x-form-valid-field'));
    LEdit.JSInterface.JSCall('inputEl.removeCls', StrToJS('x-form-invalid-field'));
    LEdit.JSInterface.JSCall('inputEl.set', [LEdit.JSInterface.JSObject('"data-errorqtip":""')]);
    LEdit.Tag := 1;
  end
  else
  begin
    LEdit.JSInterface.JSCall('inputEl.addCls', StrToJS('x-form-invalid-field'));
    LEdit.JSInterface.JSCall('inputEl.removeCls', StrToJS('x-form-valid-field'));
    LEdit.JSInterface.JSCall('inputEl.set', [LEdit.JSInterface.JSObject('"data-errorqtip":"Die E-Mail-Adresse ist nicht korrekt"')]);
    LEdit.Tag := 0;
  end;
end;

I got the error:

O3E.InputEl is undefined

I change the code to:

procedure TCPMLoginForm.EditMailChange(Sender: TObject);
var
  LEdit: TUnimEdit;
begin
  if not(Sender is TUnimEdit) then
    Exit;
  LEdit := Sender as TUnimEdit;
  if IsMailAddress(LEdit.Text) then
  begin
    LEdit.JSInterface.JSCall('addCls', StrToJS('x-form-valid-field'));
    LEdit.JSInterface.JSCall('removeCls', StrToJS('x-form-invalid-field'));
    LEdit.JSInterface.JSCall('set', [LEdit.JSInterface.JSObject('"data-errorqtip":""')]);
    LEdit.Tag := 1;
  end
  else
  begin
    LEdit.JSInterface.JSCall('addCls', StrToJS('x-form-invalid-field'));
    LEdit.JSInterface.JSCall('removeCls', StrToJS('x-form-valid-field'));
    LEdit.JSInterface.JSCall('set', [LEdit.JSInterface.JSObject('"data-errorqtip":"Die E-Mail-Adresse ist nicht korrekt"')]);
    LEdit.Tag := 0;
  end;
  EnableLoginButton;
end;

And the color works fine, but the Message does not work.

The Following Message appears:

O3E.set is not a function

 

How to solve the problem?

Thanks very much.