javascript - Rails 前端按键验证

Question

我有一个网站，用户可以在其中为类似于 imgur 的图片添加标签。我想实现实时前端验证。我希望标签仅包含字母并具有最小和最大长度。当这些前端验证失败时，我还想禁用提交按钮。我想以工具提示样式显示错误消息，并且希望在输入框不满足验证条件时立即弹出工具提示。

这就是我的 View 的一部分(show.html.erb):

<div class="add-tag">
            <p>
              <%= form_tag add_tag_path, remote:true do %>
                <%= text_field_tag :tag, nil, placeholder: 'Add tag', id: 'add-tag' %>
                <%= submit_tag 'Add' %>
              <% end %>
            </p>
</div>

我想我可以通过 Bootstrap 获得工具提示。我认为让前端验证工作的最佳方法是使用 jquery 和 .keyup() 但我真的不知道如何让它按照我想要的方式工作，如上所述。我对 jquery 还很陌生。

编辑:

我使用 jquery 验证插件进行了前端验证。以下是 application.js 中的代码:

$('#custom-tag').validate({
    onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === "") {
                return;
            } else {
                this.element(element);
            }
    },
    rules: {
      tag: {
        minlength: 5
      }
    }
  });

当验证失败时，有没有办法禁用提交按钮(我确实有后端验证设置)？如何让错误消息显示在引导工具提示中？

编辑2:

我取得了一些进展。我找到了一些代码，我的 application.js 文件现在如下所示:

$('#custom-tag').validate({
    onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === "") {
                return;
            } else {
                this.element(element);
            }
    },

    showErrors: function (errorMap, errorList) {
        this.defaultShowErrors();                            

          // destroy tooltips on valid elements                              
          $("." + this.settings.validClass)
              .tooltip("destroy");            

        // add/update tooltips 
        for (var i = 0; i < errorList.length; i++) {
            var error = errorList[i];

            $("#" + error.element.id)
                .tooltip({ trigger: "focus", placement: "right" })
                .attr("data-original-title", error.message)                
          }
    },


    rules: {
      tag: {
        minlength: 5
      }
    }
  });

仅当我单击文本框外部，然后再次单击文本框并且仍显示非工具提示错误消息时，工具提示才会触发。

编辑3:

我找到了plugin用引导工具提示替换错误消息。我的 application.js 文件代码现在如下所示:

$('#custom-tag').validate({
    onkeyup: function (element, event) {
            if (event.which === 9 && this.elementValue(element) === "") {
                return;
            } else {
                this.element(element);
            }
    },

    rules: {
      tag: {
        minlength: 5,
        number: true
}
    },

    tooltip_options: {
      tag: { placement: 'right' }
    }
  });

现在，每次按键时工具提示都会闪烁，直到工具提示消失。有办法解决这个问题吗？

编辑4:

在 tooltip_options 中设置 animation: false 修复了闪烁。我想我回答了所有的问题。我应该删除这个问题吗？

Answer 1

无论如何，您都需要在后端进行验证，因为无论前端验证尝试如何，您都无法信任用户提交的数据。也就是说，出于用户体验的目的，用户在发送数据之前意识到自己搞砸了是件好事，因此，如下所示:

var el = $('#add-tag');

el.on('keyup', fixtag);

function fixtag() {

    var val = el.val();

    // fix the value

    el.val(val); // replace it

}