CastleSoft Posted March 30, 2015 Share Posted 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. 2 7 Quote Link to comment Share on other sites More sharing options...
Abaksoft Posted March 30, 2015 Share Posted March 30, 2015 Thanks CastelSoft. Interesting ! Quote Link to comment Share on other sites More sharing options...
epos4u Posted March 30, 2015 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
albertovesx Posted March 30, 2015 Share Posted March 30, 2015 Thank you. This is very useful. Quote Link to comment Share on other sites More sharing options...
fcarvalho4 Posted April 30, 2015 Share Posted 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' }); } 1 Quote Link to comment Share on other sites More sharing options...
Stemon63 Posted May 2, 2015 Share Posted May 2, 2015 Thank you CastleSoft !!!:-) Quote Link to comment Share on other sites More sharing options...
topajin Posted May 6, 2015 Share Posted May 6, 2015 thank you! Quote Link to comment Share on other sites More sharing options...
Ron Posted May 22, 2015 Share Posted May 22, 2015 Thank you - very nice! Quote Link to comment Share on other sites More sharing options...
quanliking Posted February 4, 2017 Share Posted February 4, 2017 Thanks CastelSoft. Helpful Tip. Quote Link to comment Share on other sites More sharing options...
NelsonFS Posted February 6, 2017 Share Posted February 6, 2017 Realy thanks CastelSoft.. fantastic.. but Farshad Mohajeri could add this property on component to make validation easier. Quote Link to comment Share on other sites More sharing options...
Sebastiao Purcini Posted November 9, 2017 Share Posted November 9, 2017 Hi guys! How can I validate the fields in the "onclick" event of the button ? Tks! Quote Link to comment Share on other sites More sharing options...
RobYost Posted November 14, 2017 Share Posted 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 Quote Link to comment Share on other sites More sharing options...
delagoutte Posted February 6, 2018 Share Posted 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 ? Quote Link to comment Share on other sites More sharing options...
Sherzod Posted February 6, 2018 Share Posted 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') } } Quote Link to comment Share on other sites More sharing options...
delagoutte Posted February 6, 2018 Share Posted February 6, 2018 thank you, it works Quote Link to comment Share on other sites More sharing options...
M.Ammar Posted April 28, 2019 Share Posted 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 1 Quote Link to comment Share on other sites More sharing options...
55143681 Posted February 8, 2020 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
sicoobcooplivre Posted April 19, 2022 Share Posted 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! Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 19, 2022 Share Posted 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? Quote Link to comment Share on other sites More sharing options...
sicoobcooplivre Posted April 19, 2022 Share Posted 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! Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 19, 2022 Share Posted 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. Quote Link to comment Share on other sites More sharing options...
Sherzod Posted April 19, 2022 Share Posted 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; 1 Quote Link to comment Share on other sites More sharing options...
sicoobcooplivre Posted April 19, 2022 Share Posted April 19, 2022 It worked, thanks! Quote Link to comment Share on other sites More sharing options...
sicoobcooplivre Posted May 9, 2022 Share Posted May 9, 2022 Thank you! Quote Link to comment Share on other sites More sharing options...
sicoobcooplivre Posted December 27, 2022 Share Posted 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.