1

我在 WordPress 驱动的网站上创建了一个表单。它目前正在使用 RequireJS 向页面元素添加两个按钮，但我也希望 Require 来控制 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 设置中，但我不确定。工作开发环境代码在这里。任何帮助表示赞赏。

4

1 回答 1

1

我相信我已经找到了自己问题的答案。TL;DR 的答案是：

RequireJS 可以添加到 WordPress 中工作，但是如果您通过 WP-Admin 安装依赖于 jQuery 的插件，那么您很有可能会再次加载 jQuery 核心，这并不好。

长答案......我们开始：

我试图在jQuery Validation插件的帮助下使用两个 RequireJS 模块来管理表单验证（上面提到的添加按钮的代码无关紧要）。我让它与以下代码一起工作：

联系表单在 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>

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

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。（在这里阅读）。如果票上有后续，希望这个问题能够得到解决。在那之前，我很确定现在情况就是这样。

于 2013-04-20T19:59:19.757 回答