Jump to content

form: onBlur validation for multiple fields


apicito

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

Sorry one more clarification ... 

 

If only panel, or groupbox

it can be a single command: include 

Ext.FocusManager.enable ();


Then onblur event will work! 

 

But here there is a group onblur ... 

 

Sincerely

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...