Client Side Validation with Icon/Red Underline on UniEdit

CastleSoft · March 30, 2015

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.

Abaksoft · March 30, 2015

Thanks CastelSoft.

Interesting !

epos4u · March 30, 2015

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

AlbertoVesx · March 30, 2015

Thank you. This is very useful.

fcarvalho4 · April 30, 2015

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'

});

}

Stemon63 · May 2, 2015

Thank you CastleSoft !!!
:-)

topajin · May 6, 2015

thank you！

Ron · May 22, 2015

Thank you - very nice!

quanliking · February 4, 2017

Thanks CastelSoft. Helpful Tip.

NelsonFS · February 6, 2017

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

Sebastiao Purcini · November 9, 2017

Hi guys!

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

Tks!

RobYost · November 14, 2017

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.miraheze.org/wiki/TuniEdit

delagoutte · February 6, 2018

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 ?

Sherzod · February 6, 2018

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

delagoutte · February 6, 2018

thank you,

it works

M.Ammar · April 28, 2019

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

February 8, 2020

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?

Report post

Posted February 6, 2018

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?

sicoobcooplivre · April 19, 2022

@Sherzod and friends: Please, some help: how do I make the onclick if the field is empty, I run the validation?
Thank you very much!

Sherzod · April 19, 2022

1 hour ago, sicoobcooplivre said:

Please, some help: how do I make the onclick if the field is empty, I run the validation?

Hello,

Can you please clarify your question?

sicoobcooplivre · April 19, 2022

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!
Thank you!

Sherzod · April 19, 2022

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.

Sherzod · April 19, 2022

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;

sicoobcooplivre · April 19, 2022

It worked, thanks!

sicoobcooplivre · May 9, 2022

Thank you!

sicoobcooplivre · December 27, 2022

@SherzodTaking advantage of this topic, I would like to know if it is possible to display an alert like the one I attached? My client wants me to show the alert like this!
Thanks!

Sign In

Client Side Validation with Icon/Red Underline on UniEdit

Recommended Posts

CastleSoft

Abaksoft

epos4u

AlbertoVesx

fcarvalho4

Stemon63

topajin

Ron

quanliking

NelsonFS

Sebastiao Purcini

RobYost

delagoutte

Sherzod

delagoutte

M.Ammar

55143681

sicoobcooplivre

Sherzod

sicoobcooplivre

Sherzod

Sherzod

sicoobcooplivre

sicoobcooplivre

sicoobcooplivre

Join the conversation

Browse

Activity