jQuery Validate Plugin - How to solve the conflict with two different versions?

Question

I have to use a template in our CMS that is preloaded with an old version of jQuery Validate plug-in, and my code is written to use the newer version of jQuery Validate. If these two versions are loaded on the same page, it won't validate, and I have no way/permission to unlink the old jQuery Validate plug-in, and I have to use the newer jQuery Validate plugin.

Is there a way to solve this? Does it have something like jQuery.noConflict()?

There would never *normally* be a scenario where you would load two versions of the same plugin, so no developer would waste their time writing a method to do such. However, you never stated the versions and I don't understand why your code would not work with the older one. AFAIK, the required syntax is the same for all versions. Nor do I understand why you're using a CMS/template that cannot be fixed, updated, or over-written... this will certainly also be an issue for other plugins in the near future. — Sparky, Sep 01 '15 at 14:41
I absolutely understand it's always a bad idea to load 2 versions of the same plug-in. In a corporation, you don't always get what you want, and if you want to change something, you have to cut many red tapes. I searched jquery validate doc/ref but didn't find anything, and I'm hoping someone would know. The version in the template is dissected and tightly integrated with the CMS, and it has many bugs that the latest version fixed. One of the issue that the latest version fixed is being asked in http://stackoverflow.com/questions/8466643/jquery-validate-enable-validation-for-hidden-fields — Lance, Sep 01 '15 at 18:41
*"In a corporation, you don't always get what you want"* ~ Your corporation won't always get what it wants either. A sensible development strategy would involve fixing the root problem... the outdated or broken template. Otherwise, sorry, not possible. — Sparky, Sep 01 '15 at 18:47

Du D. · Answer 1 · 2015-09-13T12:54:38.883

You can use the noConflict function from jquery to create a hacky environment to isolate your version of validate. However if you need the same plug in both old and new version of validate you have to import it twice or do the copy of the functions yourself. Here a snippet to illustrate this:

    <div class="container main">
        <div class="row">
            <div class="col-md-12">

                <form name="old-val" id="old-val">
                    Age: <input type="text" name="age">
                    <br />
                    Postal: <input type="text" name="postal">
                    <br />
                    <input type="submit" value="Test">
                </form>

                <hr />

                <form name="new-val" id="new-val">
                    Email: <input type="text" name="email">
                    <br />
                    Postal: <input type="text" name="postal">
                    <br />
                    <input type="submit" value="Test">
                </form>

            </div>
        </div>

        <hr>
        <footer>
        </footer>
    </div>

    <script src="js/vendor/jquery/jquery-2.1.3.js"></script>

    <!-- These 3 scripts below only be available to $jqVal114 -->
    <script src="js/vendor/bootstrap/js/bootstrap.js"></script>
    <script src="js/vendor/bootstrap-dialog/bootstrap-dialog.js"></script>
    <script src="js/vendor/block-ui/jquery.blockUI.js"></script>


    <!-- This will put jQuery 2.1.3 in a place holder and replace the global $ with ver 1.3  -->
    <script src="js/jquery13.js"></script>
    <!-- These 2 scripts below only be available to $jqVal106 -->
    <script src="js/jquery.validate106.js"></script>
    <script src="js/vendor/jquery-form/jquery.form.js"></script>

    <script>
        // this will take the jQuery 2.1.3 in the place holder back into the global space ie $ == jquery2.1.3
        $jqVal06 = jQuery.noConflict(true);
    </script>

    <script src="js/jquery.validate114.js"></script>
    <script src="js/postalCodeCA.js"></script>

    <script>
        $jqVal14 = $;
    </script>

    <script>
    (function($, jQuery){

        // val v1.06
        $("#old-val").submit(function(){
            var $frm = $(this);
            if ($frm.valid()){
                alert('No errors from v1.6');
            }

            return false;
        }).validate({
            debug: true,
            rules: {
                age: {
                    required: true,
                    digits: true
                }
            }
        });

    }($jqVal06, $jqVal06));

    (function($, jQuery){

        // val v1.14
        $("#new-val").submit(function(){
            var $frm = $(this);
            if ($frm.valid()){
                alert('Valid Form, from v1.14');
            }

            return false;
        }).validate({
            debug: true,
            rules: {
                email: {
                    required: true,
                    email: true
                },
                postal: {
                    postalCodeCA: true
                }
            }
        });
    }($jqVal14, $jqVal14));
    </script>

score 1 · Answer 2 · answered Sep 08 '15 at 22:32

Yes. You're problem is somewhat common these days due to the multitudes of JS files loaded in a page. We solve this problem with what is called a JS script loader.

Basically the tactics revolves around loading JS files when needed and unloading them after use. This was you limit their scope.

Some famous script loaders :

This is a good starting point if you wanna see examples on how to implement those in your code.

jQuery Validate Plugin - How to solve the conflict with two different versions?

2 Answers2