Jump to content

form: onBlur validation for multiple fields


apicito
 Share

Recommended Posts

Clarifying my first post:
I need to do the validation of multiple fields when leaving a grouping of Edits.
If I use a uniPanel for grouping two edits I do:

in extEvent -> Blur of uniPanel:

function blur(sender, the, eOpts)
{
    ajaxRequest(sender, 'eventoSair', ['param0=MyParam'] );
}

In UniPanel1AjaxEvent of uniPanel:

procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;Params: TStrings);
begin
  if EventName='eventoSair' then
  begin
    UniMemo1.Lines.Add('Server Response:');
    UniMemo1.Lines.Add('===============');
    UniMemo1.Lines.Add(Params.Values['param0']);
    UniMemo1.Lines.Add('');
  end;
end;

I can´t use uniGroupBox for grouping because it don't have the "onAjaxEvent".
Can anyone provide me some solution to this?.

Link to comment
Share on other sites

Hi apicito. 
 
Very interesting question! 
 
There is a solution for UniPanel. 
I think for UniGroupBox, also can use UniPanel, inside which will UniGroupBox ... 
 
Try ... 
 
add Events in UniPanel1 afterrender and blur:
 
function afterrender(sender, eOpts)
{
  Ext.FocusManager.enable();
  var arr = [];
  arr.push(sender.id);    
  sender.query().forEach(function (e) {if (e.inputEl) {arr.push(e.inputEl.id)} else {arr.push(e.id); arr.push(e.id + '-body');} });
    
  sender.query().forEach(function (e) {e.on('blur', function (e) 
    { 
      setTimeout(function(){         
         if (Ext.get(document.activeElement).id) {
           for (var i = 0; i < arr.length; i++) {
             if (arr[i] === Ext.get(document.activeElement).id) {                              
               return false;
             }             
           };
           sender.fireEvent('blur', e);
         }                          
      }, 10);      
      return false;                         
    } 
    )});  
}
function blur(sender, the, eOpts)
{   
  if (sender.id == MainForm.UniPanel1.id) {
  var arr = [];
  arr.push(sender.id);  
  sender.query().forEach(function (e) {if (e.inputEl) {arr.push(e.inputEl.id)} else {arr.push(e.id); arr.push(e.id + '-body');} });  
  
  setTimeout(function(){         
         if (Ext.get(document.activeElement).id) {
           for (var i = 0; i < arr.length; i++) {
             if (arr[i] === Ext.get(document.activeElement).id) {                              
               return false;
             }             
           };
           ajaxRequest(MainForm.UniPanel1, '_blur', ['param0=0']);
         }                          
      }, 10);      
      return false;
  }
  else {ajaxRequest(MainForm.UniPanel1, '_blur', ['param0=0']);}
}
procedure TMainForm.UniPanel1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TStrings);
begin
  if EventName = '_blur' then begin
    //your custom logic
    ShowMessage('blur on Panel');
  end;
end;

certainly can code needs to be optimized...

 

post-906-0-33012900-1395831902_thumb.png

 

 
Tested in FF and Chrome ...
 
Sincerely
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...