Jump to content

Client Side Validation with Icon/Red Underline on UniEdit


Recommended Posts

To add client side validation on a UniEdit with the error provider icon/red underline simply add the following code:

 

 

1) For an Email validation

 

UniEdit1 -> ClientEvents -> UniEvents   add the following beforeinit code:

function beforeInit(sender, config)
{
  Ext.apply(sender,{allowBlank:false,vtype:'email',msgTarget : 'side'});
}

2) For a custom Time validation on a UniEdit control add the following beforeinit code:

function beforeInit(sender, config)
{
var timeTest = /^([1-9]|1[0-9])[0-5][0-9])(\s[a|p]m)$/i; 
         Ext.apply(Ext.form.field.VTypes, {
            //  vtype validation function
            time: function(val, field) {
            return timeTest.test(val);
            },
            // vtype Text property: The error text to display when the validation function returns false
            timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
            // vtype Mask property: The keystroke filter mask
            timeMask: /[\d\s:amp]/i
            });
           
  Ext.apply(sender,{
            name: 'departureTime',
            vtype: 'time',
            msgTarget : 'side'
            });           
}

3) For client side IPAddress validation on a UniEdit do the following:

function beforeInit(sender, config)
{
// custom Vtype for vtype:'IPAddress'
            Ext.apply(Ext.form.field.VTypes, {
            IPAddress:  function(v) {
            return /^\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}$/.test(v);
            },
            IPAddressText: 'Must be a numeric IP address',
            IPAddressMask: /[\d\.]/i
            });
           
  Ext.apply(sender,{
            name: 'IPAddress',
            vtype: 'IPAddress',
            msgTarget : 'side'
            });           
}

4) For clientside AlphaNum validation on a UniEdit do the following:

function beforeInit(sender, config)
{
            // custom Vtype for vtype:'AlphaNum'
            Ext.apply(Ext.form.field.VTypes, {
            AlphaNum:  function(v) {
                 return /^[a-zA-Z0-9_]+$/i.test(v);
            },
            AlphaNumText: 'Must be an alphanumeric word',          
            // This mask filter invalid keystrokes
            AlphaNumMask: /[a-z0-9]/i                                         
            });
           
            Ext.apply(sender,{
            vtype: 'AlphaNum',
            msgTarget : 'side'
            });           
}

5)  For clientside URL validation on a UniEdit do the following:

function beforeInit(sender, config)
{
   var url = /(((^https?)|(^ftp)):\/\/([\-\w]+\.)+\w{2,3}(\/[%\-\w]+(\.\w{2,})?)*(([\w\-\.\?\\\/+@`~=%!]*)(\.\w{2,})?)*\/?)/i;
            // custom Vtype for vtype:'url'
            Ext.apply(Ext.form.field.VTypes, {
            url:  function(v) {
                 return url.test(v);
            },
            urlText: 'Must be a valid URL (ie. http, https or ftp)'          
            });
           
            Ext.apply(sender,{
            vtype: 'url',
            msgTarget : 'side'
            });           
}

***Note***   msgTarget: 'side' shows the round red icon with the white exclamation mark in it.

 

 

Next step.. A UniEdit control with validation type = 'Email' or 'Time' or 'Date' or etc etc.. or 'Custom' with Regular expression. Min/Max length etc etc. 

post-14-0-54852900-1427694832_thumb.png

post-14-0-12892300-1427694840_thumb.png

post-14-0-76257400-1427694848_thumb.png

post-14-0-44706900-1427694855_thumb.png

  • Like 2
  • Upvote 7
Link to comment
Share on other sites

  • 1 month later...
Hello everybody!
One more client side function,only validate numbers!

 

UniEdit1 -> ClientEvents -> UniEvents

 

function beforeInit(sender, config)
{
Ext.apply(Ext.form.field.VTypes, {
        nonDecimalNumber: function (value) {
          return /^\d{13,13}$/.test(value);  
        },
        nonDecimalNumberText: 'The length must be 13 characters'
});
 
Ext.apply(sender, {
  extend: 'Ext.form.field.Number',
  xtype: 'numberfield',
  minValue: 0000000000000,
  maxValue: 9999999999999,
  allowBlank: false,
  maskRe: /[0-9]/,  
  vtype: 'nonDecimalNumber'
});
}
  • Upvote 1
Link to comment
Share on other sites

  • 3 weeks later...
  • 1 year later...
  • 9 months later...
  • 2 months later...

Hi,

 

When the test is not valid, there is a round red with a message on over.

is there a simple way to display a green check when the test is valid ?

 

One possible solution I think, using validitychange event for this:

 

1. CustomCSS:

.isValid {
    border-color:green;
}

2.

function validitychange(sender, isValid, eOpts)
{
    var me=sender.inputEl;
    if (isValid) {
        me.addCls('isValid')
    }
}
Link to comment
Share on other sites

  • 1 year later...

hi 

this is great and working fine but I have 2 questions 

1 - where I can find validitychange Event in UniDbEdit.

2- how can i check if it is valid or not in (Pascal Code) before posting the data to database?

Regards

  • Like 1
Link to comment
Share on other sites

  • 9 months later...

A:  To CastleSoft:

all the code works well except example 2,if I add that,

can not come out the mainForm,

all the others works well.

2) For a custom Time validation on a UniEdit control add the following beforeinit code:

function beforeInit(sender, config)
{
var timeTest = /^([1-9]|1[0-9])[0-5][0-9])(\s[a|p]m)$/i; 
         Ext.apply(Ext.form.field.VTypes, {
            //  vtype validation function
            time: function(val, field) {
            return timeTest.test(val);
            },
            // vtype Text property: The error text to display when the validation function returns false
            timeText: 'Not a valid time.  Must be in the format "12:34 PM".',
            // vtype Mask property: The keystroke filter mask
            timeMask: /[\d\s:amp]/i
            });
           
  Ext.apply(sender,{
            name: 'departureTime',
            vtype: 'time',
            msgTarget : 'side'
            });           
}

B:To Sherzod

 

where to add  validitychange?

Hi,

 

  On 2/6/2018 at 4:58 PM, delagoutte said:

When the test is not valid, there is a round red with a message on over.

is there a simple way to display a green check when the test is valid ?

 

One possible solution I think, using validitychange event for this:

 

1. CustomCSS:

.isValid {
    border-color:green;
}

2.

function validitychange(sender, isValid, eOpts)
{
    var me=sender.inputEl;
    if (isValid) {
        me.addCls('isValid')
    }
}

 

C: To all

How to make that works for UnimEdit?

Link to comment
Share on other sites

  • 2 years later...
32 minutes ago, sicoobcooplivre said:

When the user clicks on the save button, I want to test if they are empty, if any are, I want to trigger the validation and display the border in red!

Ok. I will post a simple solution a bit later.

Link to comment
Share on other sites

1 hour ago, sicoobcooplivre said:

My question is the following: I have 1 name and 1 e-mail field.
When the user clicks on the save button, I want to test if they are empty, if any are, I want to trigger the validation and display the border in red!

Simple case:

1. 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniEdit1.JSInterface.JSConfig('allowBlank', [False]);
  UniEdit2.JSInterface.JSConfig('allowBlank', [False]);

  UniButton1.JSInterface.JSAddListener('click', 'function(){return '+ Self.WebForm.JSForm.JSName +'.isValid()}');
end;

2. 

procedure TMainForm.UniButton1Click(Sender: TObject);
begin
  ShowMessage('Valid');
end;

 

  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...
  • 7 months later...

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...