Question

我一直在与两个图书馆一起努力工作，现在差不多完成了！

起初我尝试了正常的建议方式：

创建表单
通过escaped name attributes设置验证规则，因为RoR会自动设置所有表单名称属性，如下所示：user[name]。

这不会起作用，因为我不知道为什么。 JavaScript根本不会用方括号识别属性"user[name]"。

然后我以另一种方式尝试并动态添加规则。这是我现在验证的代码片段：

形式：

<form id="form" action="#">
  <input type="text" name="user[username]" />
  <input type="submit" />
</form>

JavaScript的：

$(function() {

    $("input[name='user[username]']").rules("add", {
      required: true,
      minlength: 3,
      maxlength: 20,
      messages: {
        required: "U better fill dis out!",
        minlength: "Hey, minimum of 3 letters!",
        maxlength: "U wanna fuck wis me? I no can read dat much!"
      }
    })

    $('#form').validate({
      debug: true,
      validClass: 'valid',
      errorClass: 'error',
      errorPlacement: function(error, element) {

        // qTip call
        if (!$(element).hasClass('valid')) {
          if (error.html() != "") {
            $(element).qtip({
              content: {
                text: error.html()
              },
              position: {
                my: 'left center',
                at: 'right center',
                target: $(element)
              },
              show: {
                when: false,
                ready: true
              },
              hide: false
            });
          }
        }
      },
      success: function(label, element) {
        // Hide tooltips on valid elements
        $(element).not('.error').qtip('hide');
      },
      highlight: function(element, errorClass, validClass) {
        $(element).addClass(errorClass).removeClass(validClass);
      },
      unhighlight: function(element, errorClass, validClass) {
        $(element).addClass(validClass).removeClass(errorClass);
      }
    });

});

现在想象以下场景：

我在这个文字字段中写了一些东西，就像只写了一个字母
qTip显示了我的验证消息，告诉我：＆＃34; 至少需要3个字母。＆＃34;
现在我将修复问题并输入4个字母。所有验证都应该通过。
当我移动并在输入字段外单击时，qTip将消失。
当我再次点击输入字段时，旧qTip将再次显示，说＆＃34; 至少需要3个字母。＆＃34;。但里面有4个字母。 为什么还在显示？

修改

这是Step 5

<input aria-describedby="qtip-22" data-hasqtip="22" class="valid" name="user[username]" type="text">

Answer 1

<强>解决

嗯，现在我感觉自己非常愚蠢，同时也像一个国王。

解决方案非常简单。而不是隐藏qTip，只需在验证成功时将其删除。

...
success: function(label, element) {
    // Destroy tooltips on valid elements
    $(element).not('.error').qtip('destroy');
}
...

JQuery验证器＆amp; qTip2 - 成功后不会隐藏

1 个答案: