Question

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

这是我的观点的一部分（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 validate插件进行前端验证。以下是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
      }
    }
  });

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

EDIT2：

我取得了一些进展。我找到了一些代码，我的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
      }
    }
  });

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

EDIT3：

我找到了plugin来用bootstrap工具提示替换错误消息。我的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' }
    }
  });

工具提示现在随着每个按键闪烁，直到工具提示消失。有什么方法可以解决这个问题吗？

EDIT4：

在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

}

按键上的Rails前端验证

1 个答案: