alexshotime alexshotime - 7 months ago 12
Javascript Question

Dynamically remove submitHandler from jQuery Validate to allow normal PayPal 'donate' button action

I have to add a PayPal donate button to the middle of an AngularJS donation form, so nesting the PayPal generated form tags within the donation form tags.

The donation form is processed by an old version (1.12) of jQuery Validate, so no access to the

.rules()
functions.

I found a way past the validation requirements with this answer (commented out code below), but the problem is the submitHandler takes an argument of 'form' which is always the parent form element (the full donation form).

Ideally, I'd like to disable jQuery validate all together once PayPal is selected.

Here is the function I call when the user chooses 'credit card' vs 'PayPal' and it is correctly going into the else when PayPal is selected.

$scope.payByCreditCard= function(cc_true) {
if(cc_true){
$scope.creditCardDetails = true;
$scope.submit_text = "Submit Donation";
$scope.method_type = "donate";
} else {
$scope.creditCardDetails = false;
$scope.submit_text = "Continue Donation on Paypal";
$scope.method_type = "startDonation";
// var settings = $('#donationForm').validate().settings;
// delete settings.rules;
// $("*").removeClass("required");

}
};


And the jQuery Validate calls with submit handler:

$('#donationForm').validate({
rules: {
otherDonationAmount: {
money: true,
required : true
}
},
errorPlacement : function(error, element) {
if (element.attr('id') == 'donationAmount') {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
},

submitHandler: function(form) {
$('#donation-errors').remove();
window.scrollTo(0, 0);
$("#donationForm").hide();
$("#donationForm").before('<div class="well donation-loading" style="text-align:center;">' +
This may take a few seconds. Do not leave the page or click the back button.' + '</div>');

}
});


What's happening is I disable the validation, but then when I click the PayPal donate button, the submitHandler function is triggered and it tries to process the whole donation form, rather than following what's in the PayPal generated code:

<form action="https://www.paypal.com/xxx/xxx" method="post" target="_top">
<input type="hidden" name="" value="">
<input type="hidden" name="" value="">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


So, I'm looking for a way to disable jQuery validate as both a validator and submitHandler if a condition is met (The user selects PayPal).

Answer

Quote OP:

"...nesting the paypal generated form tags within the donation form tags."

This is totally invalid HTML and it's a really bad idea. I would abandon any design that places a <form></form> container within a <form></form> container.


Quote OP:

"The donation form is processed by an old version (1.12) of jQuery Validate, so no access to the .rules() functions."

That's just not true. The .rules() methods are available going all the way back through many versions/years including 1.12 which is only one version behind the newest (1.13).


Quote OP:

"... when I click the paypal donate button, the submitHandler function is triggered and it tries to process the whole donation form, rather than following what's in the paypal generated code"

Of course it does. Your HTML is completely invalid so all kinds of unexpected things are going to happen.


Quote OP:

"Ideally, I'd like to disable jQuery validate all together once paypal is selected. ... So, I'm looking for a way to disable jQuery validate as both a validator and submitHandler if a condition is met (The user selects PayPal). I hope this makes sense and thanks in advance."

Once initialized on your form, you cannot toggle or disable the jQuery Validate plugin, the .validate() method, or any of its options including the submitHandler. This is an absolute restriction without any workaround.

The only thing (s) the developer allows you to do "dynamically" are....

  • add/remove certain rules using the .rules('add') and .rules('remove') methods. (YES, these methods are available in all versions of the plugin going back several years including v1.12)

  • You can also toggle certain boolean rules by using the depends property.

  • If you toggle visibility of a field, the ability for validation on that field is also toggled.


Why can't you just have two completely independent and separate forms, each with their own actions, rules, etc. and then use jQuery to dynamically display the one you need? The jQuery Validate plugin will automatically ignore any hidden forms & fields by default.

Comments