jQuery validate plugin adding multiple .rules() function

I have successfully been able to use the jQuery validator plugin with braintree.js. The first thing I had to do was download braintree.js to my local instead of the hosted version. I then edited the file where:

element.removeAttribute("name");

was located. I simply commented it out thus:

/*element.removeAttribute("name");*/

It's in the last line of the file.

I also put braintree's initialization before the validation script

var braintree = Braintree.create("<%=SESSION("ENCRYPTIONKEY")%>");
braintree.onSubmitEncryptForm('donation-form', null);

As you can see, I am integrating some server-side code for the encryption key, and I do not call any function after it does it's thing with the form.

I use a regular submit button which triggers both the validator and braintree.js. Braintree creates the new hidden inputs with the same name as the fields. jQuery validator validates normally as it only looks at the first instance of the input name. Then in the submitHandler method of jQuery validator I do the removal of the name attribute, but creating a new "name" attribute called "xname". This is because if braintree returns errors on their end, we have to allow the user to resubmit the form. I'll get to how that will work next.

submitHandler: function(form) {
// braintree has duplicated our fields as hidden encrypted.
// now change the name attribute from each field so it won't be submitted

$("input[data-encrypted-name]").each(function(){
$this = $(this);
var thisname = $this.attr("name");
$this.attr("xname",thisname);
$this.removeAttr("name");
}).promise().done(function(){ 
ajaxpost();             });                     

} // end submitHandler

The ajaxpost call is an $.ajax function which posts to a PHP file. This is a trick part, as I get the response from Braintree and create my own JSON with a "result" key. If the result is not "success" also, it will be either "error" or "invalid".

In the case of either "error" or "invalid" i then call a function which reinstates the original name of the fields.

    var reinstate = function(){
    // if the form has already been submitted, but braintree returns errors,
    // we have to reinstate the original field names.

    $("input[xname]").each(function(){
        $this = $(this);
        var thisxname = $this.attr("xname");
        $this.attr("name",thisxname);
        $this.removeAttr("xname");
    });
}

Now the user can try again. Hope this helps. I know this explaination is pretty hairy considering all the ajax and server side processing solutions I implemented.

tl;dr You have to stop braintree from removing the name attributes and then do it yourself right before submission.

Hi all I solve this way

$('#purchase_form').validate({
        rules: {
            name: {
                required: true
            },
            number: {
                required: true,
                minlength: 13,
                maxlength: 19
            },
            month: {
                required: true,
                regex: "(0[123456789]|10|11|12)"
            },
            year: {
                required: true,
                regex: "([0-9][0-9])"
            },
            cvv: {
                required: true,
                minlength: 3,
                maxlength: 4
            },
        },
        submitHandler: function (form) {
            $('#purchase_form').hide();
            $('#processing').show();

            braintree.encryptForm($(form));

            $.ajax({
                type: "POST",
                url: base_url+'items/purchase_direct',
                data: $(form).serialize(),
                dataType: "json",
                success: function (response) {
                    if(response.status == 'error')
                    {
                        $('#number_direct').attr('name','number');
                        $('#cvv_direct').attr('name','cvv');
                    }
                    else
                    {
                        $('#purchase_form').hide();
                        $('#processing').hide();
                        $('#purchaseconfirm').show();

                    }
                }
            });
            return false;
        }
    });

add the braintree.encryptForm($(form)); inside the submitHandler.. that makes the braintree removed there the input name. in the case it fails again I will add the input name again.

Don't forget to remove braintree.onSubmitEncryptForm('braintree-payment-form', optionalCallback);

sorry for my english..

There is a way to extend the validator object to add multiple rules. See the documentation here.

var newRules = {name: {required: true}, email: {required: true} }; //your object of new rules

$.validator.addClassRules(newRules);