让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)。希望这个问题将被解决，如果有跟踪通过票。直到那时，我敢肯定，这是怎么回事，现在，