Jump to content
uniGUI Discussion Forums
CastleSoft

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

  • Upvote 6

Share this post


Link to post
Share on other sites

Thank you for this CastelSoft

 

this way i am able to learn, as i have never done js only delphi pascal

 

this is a great help and a good learning curve

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Thank you - very nice! :)

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites

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')
    }
}

Share this post


Link to post
Share on other sites

×