Jump to content


Photo

Client Side Validation with Icon/Red Underline on UniEdit


  • Please log in to reply
11 replies to this topic

#1 CastleSoft

CastleSoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 153 posts

Posted 30 March 2015 - 05:52 AM

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. 

Attached Files

  • Attached File  pic1.png   12.99KB   184 downloads
  • Attached File  pic2.png   4.72KB   202 downloads
  • Attached File  pic3.png   4.35KB   167 downloads
  • Attached File  pic4.png   3.85KB   142 downloads

  • 6

#2 Abaksoft

Abaksoft

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 462 posts
  • LocationAlgeria

Posted 30 March 2015 - 06:27 AM

Thanks CastelSoft.
Interesting !
  • 0

#3 Schuiab

Schuiab

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 317 posts

Posted 30 March 2015 - 09:54 AM

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


  • 0

#4 Alberto vesx

Alberto vesx

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 466 posts

Posted 30 March 2015 - 04:43 PM

Thank you. This is very useful.


  • 0

#5 fcarvalho4

fcarvalho4

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 100 posts
  • LocationLisboa

Posted 30 April 2015 - 07:47 PM

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

  • 1

#6 Stefano Monterisi

Stefano Monterisi

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 109 posts

Posted 02 May 2015 - 09:48 AM

Thank you CastleSoft !!!
:-)


  • 0

#7 lutongjin@126.com

lutongjin@126.com

    Member

  • Members
  • PipPip
  • 16 posts

Posted 06 May 2015 - 02:48 AM

thank you! :)


  • 0

#8 delphidude

delphidude

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 146 posts
  • LocationNorway

Posted 22 May 2015 - 06:55 PM

Thank you - very nice! :)


  • 0

#9 quanliking

quanliking

    Newbie

  • uniGUI Subscriber
  • Pip
  • 3 posts
  • LocationYueqing city, zhejiang province NingKang east road no. 98

Posted 04 February 2017 - 02:40 PM

Thanks CastelSoft. Helpful Tip.


  • 0

#10 NelsonFS

NelsonFS

    Active Member

  • uniGUI Subscriber
  • PipPipPip
  • 86 posts

Posted 06 February 2017 - 01:43 PM

Realy thanks CastelSoft.. fantastic.. but Farshad Mohajeri could add this property on component to make validation easier.


  • 0

#11 Sebastiao Purcini

Sebastiao Purcini

    Newbie

  • Members
  • Pip
  • 9 posts

Posted 09 November 2017 - 12:33 AM

Hi guys!

 

How can I validate the fields in the "onclick" event of the button ?

 

Tks!


  • 0

#12 RobYost

RobYost

    Advanced Member

  • uniGUI Subscriber
  • PipPipPipPip
  • 175 posts
  • LocationFlorida, USA

Posted 14 November 2017 - 03:35 PM

I can't make this work with mobile edit (TUnimEdit)

 

Do you know if it possible to make this work?

 

I also incorporated the validators into a component.

Here is the source: http://unigui.mirahe...g/wiki/TuniEdit


  • 0

http://unigui.mirahe.../wiki/Main_Page

Please add any utilities you think are useful. I will try to keep the wiki organized.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users