2

the problem that I'm facing is: I do validations on the client side using validate() (https://jqueryvalidation.org).

On the blur event I call ($this).valid(); for each field in my form.

Before loading sagepay.js (https://pi-test.sagepay.com/api/v1/js/) the validation works as intended.

If I load sagepay.js (it does not matter when) ($this).valid() always returns true.

I tried changing the event but sagepay overrides all these events: blur focus focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup error contextmenu

My question is : What can i do to keep validating using ($this).valid() or why does sagepay override valid()?

Jon Saw
  • 7,599
  • 6
  • 48
  • 57
  • I think this is a limitation imposed by the way events are handled wrt form submissions. Basically, iff you want to be able to do any validation or processing on a form submit, that requires AJAX, then you *MUST* disable the form submit event default action. Once you do that, you then you end up having to taken over an unreasonably large number of events to make sure the form behaves as expected, and that interferes with validation libraries. Been banging my head against this problem for a long time, and would love to find a solution too. – Jason Oct 11 '17 at 22:53
  • You may be able to get away with making the card tokenisation call *synchronous*, but your browser would freeze up while the AJAX call happens, and that's not ideal. My current workaround is to split the form into two forms on two pages: the first to tokenise the credit card only, and the second to enter the personal details only. The user has 600 seconds to complete the second form before the card token expires. Not sure if that qualifies as an answer or just another avenue to explore. – Jason Oct 11 '17 at 22:57
  • 1
    @Jason for the current specs I can't split the form nor make the call synchronous. The accepted fix for the issues was to implement a custom validation for each of the 5 fields using the focusout event. As this is workaround we still need a clearer answer. – Tanasa Mihai Stefan Oct 13 '17 at 07:25

0 Answers0