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-Admin安装依赖于jQuery的插件，那么你很有可能第二次加载jQuery核心，这是不好的。

答案很长......我们走了：

我试图使用两个RequireJS模块来管理表单验证，并使用jQuery Validation插件的一些帮助（上面提到的代码添加按钮并不重要）。我使用以下代码使用它：

联系表单在HTML中如下所示：

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

在HTML中引用RequireJS，如下所示：

// 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看起来像这样：

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)。希望如果机票上有后续问题，我们会解决这个问题。在那之前，我很确定现在是这样的。

获取jQuery Validation插件以使用requirejs

1 个答案: