讓jQuery驗證插件與requirejs一起工作

Question

我在WordPress驅動的站點上創建了一個表單。目前它正在使用RequireJS爲頁面元素添加兩個按鈕，但我還希望需要控制jQuery Validation插件中的一些內容。按鈕的添加工作正常，但可悲的是，驗證不起作用。

的形式看起來像這樣的HTML：

<form id="contact" method="get" action=""> 
    <fieldset id="contact-form-fields"> 
     <p> 
     <label for="form_name" class="form-titles">Name</label> 
     <input name="form_name" id="form_name" type="text" placeholder="Name" aria-required="true" class="required"> 
     </p> 
     <p> 
     <label for="form_email" class="form-titles">Email</label> 
     <input name="form_email" id="form_email" type="text" placeholder="Email" aria-required="true" value=""> 
     </p> 
     <p> 
     <label for="msg_text" class="form-titles">Email</label> 
     <textarea tabindex="-8" rows="10" placeholder="Type your awesome message here." class="placeholder" name="msg_text" id="msg_text" aria-required="true" class="required"></textarea> 
     </p> 
    </fieldset> 
    <input type="submit" value="Send Your Message" name="submit" class="button"> 
    </form> 

RequireJS被附加到頁面這樣的：

<script data-main="http://livetest.kaidez.com/wp-content/themes/kaidez-2012/js/config.js" src="http://livetest.kaidez.com/wp-content/themes/kaidez-2012/js/require-jquery.js"></script> 

上述config.js文件看起來像這樣：

require.config({ 
    baseUrl: "http://livetest.kaidez.com/wp-content/themes/kaidez-2012/js", 

    deps: ['scripts'], 

    paths: { 
    jquery: "jquery", 
    jqueryValidate: "jquery-validate.min" 
    }, 

    shim: { 
    jquery: { 
     exports: "jquery" 
    }, 
    jqueryValidate: { 
     deps: ["jquery"] 
    } 
    } 
}); 

config.js說它有一個名爲scripts.js的依賴關係，如下所示：

// code that adds buttons to the page 
require(['jquery'], function ($) { 

    var header = document.getElementById("masthead"), 
    $navMenu = $("#site-navigation-list"), 
    $searchBox = $("#searchform"), 
    menuButton = document.createElement("div"), 
    searchButton = document.createElement("div"), 
    showMenus; 

    $(menuButton).attr("id", "menu"); 
    $(searchButton).attr("id", "search"); 

    header.appendChild(searchButton); 
    header.appendChild(menuButton); 

    showMenus = function(btn,el) { 
    $(btn).click(function() { 
     if (el.is(":visible")) { 
     el.slideUp({ 
      complete:function(){ 
      $(this).css("display",""); 
      } 
     }); 
     } else { 
     el.slideDown(); 
     } 
    }); 
    }; 

    showMenus(menuButton, $navMenu); 
    showMenus(searchButton, $searchBox); 

}); 

//code that controls jQuery Validate 
require(["jquery", "jqueryValidate"], function($, jqueryValidate) { 
    $("#contact").validate({ 
    rules: { 
     form_email: { 
     required: true, 
     number: true 
     } 
    } 
    }); 
}); 

看着其他發佈的問題，jsFiddles等，我似乎無法找到答案。我認爲我的錯誤出現在我的RequireJS設置中，但我不確定。工作環境代碼是here。任何幫助表示讚賞。

Answer 1

我相信我已經找到了自己的問題的答案。該TL; DR的回答是：

RequireJS可以添加在WordPress的工作，但如果你通過WP-管理員安裝jQuery的依賴插件，還有，你會加載jQuery的核心第二次非常好的機會，這並不好。

長的答案......在這裏，我們去：

我試圖用兩個RequireJS模塊從jQuery Validation插件一些幫助（上面提到的代碼添加按鈕沒有按管理表單驗證沒關係）。我得到這個與下面的代碼工作：

的聯繫表格看起來像這樣的HTML：

// both require.js and config.js are stored in a directory called 'js' in a child theme 
<script src="<?php echo get_stylesheet_directory_uri(); ?>/js/require.js" data-main="<?php echo get_stylesheet_directory_uri(); ?>/js/config.js"></script> 

config.js：

<p id="success-msg" style="display:none">Your message has been sent successfully.</p> 
<!-- The tag above appears if the form goes through--> 
    <form id="contact" method="post"> 
    <fieldset> 
     <div class="left"> 
     <input name="form_name" id="form_name" type="text" placeholder="Your Name"> 
     </div> 
     <div> 
     <input name="form_email" id="form_email" type="text" placeholder="Your Email" class="required email"> 
     </div> 
     <textarea tabindex="-8" rows="10" placeholder="Type your awesome message here." class="placeholder" name="msg_text" id="msg_text" ></textarea> 
    </fieldset> 
    <input type="submit" value="Send Your Message" name="submit" class="button"> 
    </form> 

RequireJS在HTML像這樣被引用看起來像這樣：

requirejs.config({ 
    baseUrl: "http://yourdomain.com/wp-content/themes/yourTheme/js", 

    deps: ["form"], // lists 'form.js' as a dependency, where our form code will be 

    paths: { 
    /* 
    * Referencing the 'wp-includes/js/' 
    * directory in WP. jQuery was pre-installed 
    * but Validation was manually added. 
    */ 
    jquery: "http://yourdomain.com/wp-includes/js/jquery/jquery", 
    val: "http://yourdomain.com/wp-includes/js/validate" 
    }, 

    shim: { 
    jquery: { 
    exports: 'jquery' 
    }, 
    val: { 
    deps: ['jquery'], 
    exports: 'jquery' 
    } 
}, 

    waitSeconds: 20 
}); 

上述form.js文件如下所示：

define("form", ["jquery", "val"], function($) { 

$("#contact").submit(function(event) { 
    var name = $("#form_name").val(); 
    var email = $("#form_email").val(); 
    var text = $("#msg_text").val(); 
    var dataString = 'name='+ name + '&email=' + email + '&text=' + text; 

    event.preventDefault(); 

    if($("#contact").valid()){ 
     $.ajax({ 
     type: "POST", 
     url: "http://yourdomain.com/wp-content/themes/yourTheme/email.php", 
     data: dataString, 
     success: function(){ 
     $("#contact").fadeOut(100); 
     $('#success-msg').fadeIn(100); 
     } 
    }); 

    return false; 
    } 
    }); 
}); 

只是爲了清楚起見，在成功提交表單（email.php）後發送電子郵件的PHP看起來像這樣。

<?php 

if($_POST){ 
    $name=$_POST['name']; 
    $email=$_POST['email']; 
    $text=$_POST['text']; 

    //send email 
    mail("your@email.com", "your subject", 
    $text, "From:" . $email); 
} 

?> 

好消息是，以上的一切都是按照原樣進行的。如果你使用WordPress來安裝一個jQuery相關插件，壞消息就會顯現出來。由於採用WordPress架構，像這樣的插件會自動安裝jQuery核心，除非它已經通過functions.php或其他WP內部方法安裝。像我這樣通過RequireJS調用jQuery不會阻止這一點。

我嘗試了很多不同的方法來解決這個問題，使用wp_deregister_script(),wp_enqueue_script()等，但沒有運氣。這對我正在處理的個人項目很好，但對客戶項目可能不好。

有一個WordPress門票可以爲WordPress添加AMD功能，目的是調用不同版本的jQuery。 （讀它here)。希望這個問題將被解決，如果有跟蹤通過票。直到那時，我敢肯定，這是怎麼回事，現在，