2015-09-01 29 views
3

我必須在我們的CMS中使用預先加載了舊版jQuery Validate插件的模板,並且我的代碼被編寫爲使用jQuery Validate的較新版本。如果這兩個版本加載在同一頁面上,它將不會驗證,我沒有辦法/權限來斷開舊的jQuery Validate插件,我必須使用更新的jQuery Validate插件。jQuery驗證插件 - 如何解決與兩個不同版本的衝突?

有沒有辦法解決這個問題?它有類似jQuery.noConflict()的東西嗎?

+0

也就永遠*正常*是這樣一個場景,你會加載相同插件的兩個版本,所以沒有開發商會浪費他們的時間寫的方法做這樣。但是,你從來沒有說過這些版本,我不明白爲什麼你的代碼不適用於舊版本。 AFAIK,所需版本的語法是相同的。我也不明白你爲什麼要使用無法修復,更新或覆蓋的CMS /模板......這對於其他插件在不久的將來肯定也是一個問題。 – Sparky

+0

我完全明白加載相同插件的2個版本總是一個壞主意。在一家公司,你並不總是得到你想要的東西,如果你想改變某些東西,你必須削減許多繁文red節。我搜查jquery驗證doc/ref,但沒有找到任何東西,我希望有人知道。該模板中的版本已經解剖並與CMS緊密集成,並且它有許多修正了最新版本的錯誤。在http://stackoverflow.com/questions/8466643/jquery-validate-enable-validation-for-hidden-fields – Lance

+0

中詢問最新版本的問題之一是「在公司中,你並不總是得到你想要的東西「*你的公司不會總是得到它想要的東西。一個明智的發展戰略將涉及解決根本問題......過時或破碎的模板。否則,對不起,不可能。 – Sparky

回答

1

是的。由於在頁面中加載了大量的JS文件,因此你現在的問題有點常見。我們用所謂的JS腳本加載器來解決這個問題。

基本上戰術圍繞加載JS文件時需要和卸載後使用。這是你限制他們的範圍。

一些著名的腳本裝載機:

This是一個很好的起點,如果你想看到有關如何執行這些代碼中的例子。

2

您可以使用jquery的noConflict函數創建一個hacky環境來隔離您的驗證版本。但是,如果你需要在舊版本和新版本驗證中使用相同的插件,則必須將其導入兩次或自己執行函數的複製。這裏的一個片段來說明這一點:

<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>