I have an order form that I'm creating. I'm using Codeigniter for the backend and Foundation 5 with Abide Validation and Stripe Checkout for payment. Here's what I'm trying to do:
user fills out form (abide live validates)
user submits form
abide validates
on valid, open the stripe payment handler
on successful payment, submit the form
My issue that I'm having is abide is preventing the default form submission. I can do an AJAX post with JQuery, but I'd prefer not to since I can use CSRF with Codeigniter more easily doing a "normal" form submission.
Basically I was hoping for code like below, but it doesn't work because the submit will re-trigger the "valid" event.
$('#order_form').on('valid',function(){
handler.open({ //stripe stuff in here }, function(){
//if successful payment
$('#order_form').submit();
});
});
If anyone has some ideas to help, they would be greatly appreciated! Thanks!
$('#order_form').get(0).submit() will execute the underlying submit without jQuery's bindings.
Related
I am using ReCaptcha 2 on a webpage. The user enters the username and password and is validated through an Ajax call. (Of course, the user will need to verify ReCaptcha before clicking the submit button). If the validation fails, I want to give another chance to resubmit data. However, the ReCaptcha validation fails with 'duplcate submission error' It seems that a validated ReCaptcha cannot be submitted again. So my question is -- how can I reset a verified ReCaptcha so that the user could reverify it? I am using JavaScript, jQuery and Vue.js
Use the reset() method, e.g
grecaptcha.reset();
I have a form that submits to a POST action URL I don't have control over, which leaves server-side validation on that URL out of the question. I need to be able to pass a pen test with reCaptcha and am curious if the below scenario would work.
One idea I had was to do all the normal client-side reCaptcha validation using the callback response and then enabling the submit button via JS.
That button would preventDefault() to submit the form to a different PHP file (via ajax). That PHP file would perform proper server-side validation, then based on the response submit the form to the main post url on the success ajax response or not via the error response via JS.
I could also load the form without a POST URL then populate the URL in the DOM based on the success ajax response prior to JS submit.
Does anyone have any better ideas or other ways I can validate recaptcha server-side even if I don't have control over the main POST URL?
Or do you think that client-side only validation could pass a pen test?
Thanks in advance for any input.
I'm using a braintree.js drop in form. I'm submitting it with ajax, by registering for the onPaymentMethodReceived callback. So far so good, it works fine.
However, after submitting the form, there's a two step process: first the payment details are submitted to braintree and verified (while a spinner shows over the form), then the details on the page are anonymised, and the onPaymentMethodReceived callback fires with a nonce I can use to send to my server.
The problem is I'd like to disable the form submission button when it's clicked, but registering an onClick handler on it causes braintree to ignore the click.
I understand that the customer's card details are visible on the page at this point, but I can't grab them anyway due to the iframe being from a different domain, and any potential method I could use at this point to grab the details I could do with setInterval() anyway, so I don't really see a security case for this.
Is there any way to detect the click here?
Full disclosure: I work at Braintree. If you have any further questions, feel free to contact support.
To my knowledge you can't jump in the middle of the tokenization process with the Drop-In. It sounds like you are looking to create a custom experience for your users that steps beyond the Drop-In use case.
Enabling a form submit button after the onPaymentMethodReceived callback is the common Drop-In use flow, but by creating a custom integration you can directly handle the client-side tokenization process and wrap it with whatever functionality you need:
var client = new braintree.api.Client({clientToken: "CLIENT-TOKEN-FROM-SERVER"});
client.tokenizeCard({
number: "4111111111111111",
expirationDate: "10/20"
}, function (err, nonce) {
// Send nonce to your server
});
In the simple javascript drop-in UI, when the form is being submitted, braintree.js will intercept the form submission and inserts a hidden field named "payment_method_nonce" into the form, before the submission actually goes to the server.
However, when using the AngularJS as the frontend framework, I generally don't want the form submission to directly go to the server and then do a page reload. Instead, I want my AngularJS function to intercept and deal with the form submission (e.g., via ng-click or ng-submit), AND in its processing it needs to retrieve and use the "payment_method_nonce" value.
I tried it and it can still intercept the form submission. However, it seems like AngularJS intercepts the form submission BEFORE braintree.js does and inserts the "payment_method_nonce" field.
Hence, my AngularJS code that responds to the form submission cannot retrieve that "payment_method_nonce" field and perform appropriate processing. Any suggestions on how I can work around this?
Thanks!
After reading more braintree docs, it turns out registering a paymentMethodNonceReceived callback when setting up the braintree gateway is the right way to go!
i use remote method of validator for checking if username exists in DB
my scenario:
form with one field (username of course)
i filled field
it passes validation, but i don't sending form yet
going to DB inserting username that i filled in form that i still don't sent yet
returning to my form press on submit btn
voila, it pass validation (here the issue if u don't understand yet)
of course i did validation on the server side too, but it will be great that validation for remote method will fire too when sending form
p.s. i'm using 1.5.5 version but see that this issue still exists
If I'm reading this properly, jQuery is not at fault here.
If this isn't correct let me know. I am imagining a registration form.
I go to your form, enter a username. jQuery says the username is available using the remote validation technique.
Before I click submit, someone else submits the same form with the same username, and gets it.
I can still submit the form, even though I have an already taken username.
This is a classic scenario. A concurrency problem. The data is now stale that was pulled by jQuery validation during my registration. You need to adjust for this scenario in your remote page or make jquery validation run on form submit as well. You could just call validate() on your form in the submit method of your form.