How to Integrate Mailgun with jQuery Validation

[chrisbo]

It would be helpful if an example of how to integrate Mailgun with jQuery Validation - http://jqueryvalidation.org/ was provided

[msigley]

I think jQuery Validation has good documentation already on how to use custom validation rules: http://jqueryvalidation.org/jQuery.validator.methods/

I do not personally use jQuery Validation, but if you do, maybe you could write an integration and submit it as a PR? I am sure this is a common use case.

[zevisert]

Integrated: https://gist.github.com/zevisert/e0e162049d085434e95c934821df16bb

[dennisleussink]

@zevisert do you have a working demo from the integration online somewhere?

[zevisert]

I don't sorry. I wrote the integration above as part of some work I did for company I am no longer working for (co-op). The overall project isn't currently available to the public.

[dennisleussink]

@zevisert I tried to implement your code but I keep getting the error: success_callback is not defined Where do I need to add this function to get the integration working?

[zevisert]

You can use my plugin by attaching it directly to a form using $(element).mailgun_validate(...) or use it by creating a new method ( validation rule ) with jQuery validation jQuery.validator.addMethod(...). There's sample code in the comments right at the top of the gist - only implement one of those two options.

In either case you should implement your own error_callback, success_callback , and inprogress_callback as anonymous functions replacing those keywords where they appear.

[dennisleussink]

Thank you @zevisert, I got the integration working by adding those anonymous functions:

var success_callback = function() { };

[zevisert]

@dennisleussink Using a function expression is a bit more dangerous because it doesn't get loaded until the browser encounters it so you might still get some ReferenceErrors if your execution path isn't all in order, whereas a function declaration which loads before the browser runs any code.

You'll probably want to just declare the function inline right where I suggested, or change it to a function declaration.

$('form_selector').mailgun_validator({
     api_key: 'api-key',
     in_progress: function () {
         // Your code for showing the user that validation is in progress
     },
     success: function () {
        // Your code for showing the user that a validation succeeded
     },
     error:  function () {
        // Your code for showing the user that an validation error occurred
    }
 });

Or similarly for if you're defining methods in jQuery validation.