使用 JavaScript 触发 happy.js 验证？答案

【问题标题】：Trigger happy.js validation with JavaScript?使用 JavaScript 触发 happy.js 验证？
【发布时间】：2012-03-07 00:14:36
【问题描述】：

jQuery validation 对我来说有点臃肿，所以我找到了Happy.js。不幸的是，只有在使用我没有的提交按钮时才会触发验证。 jQuery-validation 提供了一个函数“form()”来以编程方式触发验证，所以我尝试在 Happy.js 中实现该函数——但没有任何成功。我找到了一个快乐回调实现（commit），但这也不起作用。

一些代码（更新）：

$('#someFormSubmit').click(function() {
  $('#someForm').submit();
});
$('#someForm').submit(function(event) {
  event.preventDefault();
  var jqxhr = $.post('/some', $('#someForm').serialize())
    .success(function(response) {});
});
$("#someForm").isHappy({
  fields: {
    '#name': {
      required: true,
      message: "Hello"
    },
  },
  testMode: true,
  unHappy: function () { alert("hello"); },
});

回调没有警报，“happy”始终为真，而它应该为假。

表单位于 twitter-bootstrap 模态框中。由于 modal-body 和 modal-footer 的分离，只有一个链接 .btn 可以提交，但没有正确的输入 type=submit。

有什么解决办法吗？

【问题讨论】：

isHappy 设置验证，而不是运行它。它应该在页面加载时运行，而不是在点击事件时运行。
对。这适用于 jquery 验证。改变了它，但仍然没有成功。 :(
试着把$("#someForm").isHappy({放在$('#someForm').submit(function(event) {之前。
是的，它终于起作用了。我会用代码更新问题...
确保保留问题中的原始代码，这样它仍然有意义。更好的是，选择有帮助的答案，或回答您自己的问题。解决方案应该真正远离问题，这就是答案的目的。

标签： javascript jquery validation callback

【解决方案1】：

试试这样的：

// Remember to do all your happy validation stuff first, to ensure that jQuery
// fires off the events in the correct order.
$("#yourForm").isHappy({
  // your validation config
});

$("#yourForm").submit(function (event) {
  // This line prevents the form from actually being submitted
  event.preventDefault();

  // You can then define your actions however you like
  $.post({
    // your config here
  });
});

// When it's time to "submit" the form, it's easy
$("#yourForm").submit();

我没有用 happy.js 测试过，但它应该也触发验证。

更新：这是我的jsfiddle。它表明它正在工作（尽管如果你检查小提琴，你会看到对这段代码的一些修改）。不过，我不知道为什么这些字段没有验证模糊。这应该与happy.js 开箱即用，因此如果您遇到该问题，您可能需要向作者发布问题。

【讨论】：

jQuery 应该按照声明的顺序触发事件。所以，happy 的事件处理程序应该运行，然后这个，然后event.preventDefault 应该停止提交。所以，它应该工作。 :-)
@Rocket 好点。添加注释以确保happy.js 内容首先明确完成。
AJAX $.post() 适用于您的示例，但不会触发验证。
好的，验证不会被触发并且 unHappy-callback 警报。但是表单也是针对无效数据提交的。
@Patrick 在我的更新中检查指向 jsfiddle 的链接。它在那里工作。

【解决方案2】：

您是否尝试过使用submitButton 选项？

来自http://happyjs.com/的官方文档：

submitButton (string)：如果您将 jQuery 选择器传递给此表单，则会在单击该项目而不是提交时验证表单。

【讨论】：

【解决方案3】：

来自HappyJS

Happy.js 现在将验证模糊事件中的单个字段和提交时的所有字段。

对模糊事件的验证还不够？

尝试将你的 HTML 代码和你正在用 JS 做的事情写到 jsfiddle 中，这样会更容易获得帮助。

但是，如果您只是想在单击某些按钮/元素时激活验证，只需将 jQuery 选择器设置为来自快乐函数的参数中的变量 submitButton

【讨论】：

【解决方案4】：

Happy.js 注册了一个提交处理程序，因此如果您需要以编程方式触发它，您应该能够只使用 jQuery 触发提交，不是吗？

$(form).submit()

【讨论】：

如果您想使用 $.post 进行 AJAX 调用，则不要。

【解决方案5】：

$('#my_form').isHappy({
    when: "blur keyup"
});

此语法适用于当前版本的 Happy.js。

【讨论】：