Comments (10)
I'm going to close this issue as in v0.1.18 we introduced an onvalidate
property on the settings.
Let's create a new issue if onvalidate
does not serve it's purpose properly.
from adyen-cse-web.
Hi Richard,
Currently there are no additional events on callbacks via the options
.
There are one and a half ways you could go:
- Via validations
You could build your own additional logic and listen to on change / blur.
The return object of the adyen.createEncryptedForm
(assuming it's assigned to var cseForm
) ships with cseForm.isValid()
method you can use to test overall validity (given validations are enabled). Furthermore there is a cseForm.validity
property which exposes more detailed information on which checks fails and succeed. (For example: {year: true, month: true, cvc: true, luhn: false}
).
Also it sets valid
and invalid
classes on the form elements if you don't want to map the validity
to elements yourself.
- If you are purely interested in the card number, you can have a callback by - consider this a hack, not a feature - registering a cardTypeDetection callback as described in https://github.com/Adyen/CSE-JS/blob/master/js/addOns/adyen.cardtype.js:
cseForm.addCardTypeDetection( function( type, friendlyName) {
// called on every keypress, change event also when the type actually didn't change.
});
But in reality this is just registering to change
, blur
and keyup
events on the card number element.
I agree with you that in further revisions of this library better plugin options must be offered.
Regards,
Arnoud
from adyen-cse-web.
The form.isValid()
function already is a great start. 👍
from adyen-cse-web.
It seems all fields with exception of the creditcard number field are validating on blur. The creditcard logo is shown after a couple of keyup events. Can you elaborate on when the validation events are triggered exactly?
from adyen-cse-web.
Sorry Richard. I overlooked this. Validations are triggered only on 'change' and on 'submit' of the form.
from adyen-cse-web.
Already solved it by using the blur event. Maybe the validation documentation is something to look into, so other users can more easily implement custom rules for their CSE form.
from adyen-cse-web.
Any update on some validation events or hooks?
from adyen-cse-web.
Richard,
Sorry for the delay. In the latest version validations trigger on change
, blur
,keyup
. Next to the invalid
class a valid
class will be added to fields (unless options.disabledValidClass
is set).
No hooks are provided as this point in time. Did you look into nodom
variant of the library? This might be more convenient for you to use.
Kind regards,
Arnoud
from adyen-cse-web.
I'm trying to do the same thing, enable/disable some buttons depending on adyen validation but doesn't seem trivial. Could you provide some more information please?
from adyen-cse-web.
Hi George,
At this point in time you can have different approaches:
- Manually bind to
change
/blur
events on the form and look for thevalid
andinvalid
classes on your input elements on which you want to base the enabled/disabled state of your buttons. - Next to an
adyen.encrypt.createEncryptedForm
also instantiate an encryption object and use it's validation:var encryption = adyen.encrypt.createEncryption(key, options);
.
You can callvar validationResult = encryption.validate( cardData );
to get instant validation results. - Given that you have a variable
var encryptedForm = adyen.encrypt.createEncryptedForm();
you can also access theencryption
object in the previous example viavar encryption = encryptedForm.encryption;
.
As such you can callvar validationResult = encryptedForm.encryption.validate( cardData )
to get an instant validation result at any moment in time.
In both last examples the cardData
needs to have a structure like below:
var cardData = {
number : cardNumber,
cvc : cvc,
holderName : holderName,
expiryMonth : expiryMonth,
expiryYear : expiryYear,
generationtime : generationtime
};
Please let me know if this works out for you!
Kind regards,
Arnoud
from adyen-cse-web.
Related Issues (20)
- How to use with React Native? HOT 1
- Please rename this dependency to match its repo name?
- Remove log statements in addons/adyen.cardtype.js HOT 6
- Is Device finger printing included/exposed in this library? HOT 1
- Fail to validate CVC field
- adyen.cardtype.determine returns "mc" when card number is undefined or "" HOT 5
- Passing 2 digits year should be valid HOT 1
- DfDo doesn't work
- adyen.encrypt_0_1_16.js causing forced reflows when using CreditCard input field. HOT 5
- IE 10: NOT READY: generator isn't seeded
- adyen.cardtype.determine doesn't support 19 digits visa card detection
- Expiration date with two digits HOT 1
- The library considers valid cards that have expired 2 years ago
- adyen-cse-web is not added to package-lock.json on `npm install` HOT 1
- Resolve the NPM question name HOT 8
- Module not found: Error: Can't resolve 'crypto' HOT 2
- Form submission prevention from encyption library is bad idea
- How to get the string for createEncryptedForm
- Switching to Secured Fields - Cut-off Date HOT 2
- Is there a way to validate/test the Adyen CSE generated ? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from adyen-cse-web.