Trigger validation on blur with fields (secureFields)

[joxpulp]

In our app if an user focus on an input and then blurs without writing anything, the input should validate and an error message should be shown like: "field is empty", with secureFields (field) this is not happening, the validationChange event is only triggering if the user writes something on the input, since I just can't access to the input value and create a custom validation because is inside of an iframe, there is a way to achieve this? or like a flag to add inside the mounting of the field like validateOnBlur:

 const cardNumberElement = mp.fields.create('cardNumber', {
      placeholder: "Card Number",
      validateOnBlur: true
   }

Note: I notice that this behavior is happening with cardPayment brick using bricks, but this is not an option currently in our app

[AdaltonLeite]

Hello @joxpulp ,

Currently SecureFields doesn't have this event validation native and ideally the form should have the error status only when the form is submit.

However, you can listen to the .on('validityChange') event and if the object comes empty you consider that it just clicked and didn't fill in any information.

I hope that helps, thank you!

[joxpulp]

Hi @AdaltonLeite, I just tried to listen validityChange event but it doesn't return anything unless I write something on the field, the idea of having the possibility to trigger validationOnBlur or validationOnFocus (or when the input is touched) is to trigger the validityChange event and receive the errorMessages array to show the errors on my page.

I think that in the future this could be an amazing feature and you give the posibility to have the same type of validation that cardPayment brick has :D

In the other hand, with secureFields is there a way to disable iframe?

[AdaltonLeite]

Hi @joxpulp,

I spoke with the team regarding your suggestion for adding this functionality, and we found it to be very interesting. We've added it to our backlog, but unfortunately, we don't have a specific date for when this feature will be available.

As for disabling the iframe, it's currently not possible as the iframe is necessary to maintain your application's PCI compliance.