如何在自定义表单验证器的字段上显示错误？答案

【问题标题】：How do I display an error on a field for a custom form validator?如何在自定义表单验证器的字段上显示错误？
【发布时间】：2017-04-21 14:06:16
【问题描述】：

我已经用JS构建了一个表单验证器，下面展示了其中的一部分。我只需要帮助来显示错误并滚动到该字段。

好的，所以每个<input> 都会有属性来指定他们需要的验证，例如：

<input data-mandatory="yes" data-validation="phone" data-max-digits="10">

在提交表单时会解析属性，如果遇到错误字段，我需要滚动到该字段并以英语显示错误（不需要多语言）。

var $form = $('#main-form');
$form.submit(function(event) {

    event.preventDefault();

    // per field
    $form.find("input,textarea").each(function(f, field){

        // read metadata
        var type = $(field).attr("type");
        var mandatory = $(field).data("mandatory");
        var maxDigits = $(field).data("max-digits")) || 1000;
        var validation = $(field).data("validation");

        // read value
        var value = $(field).value();

        // process mandatory textfields
        if (type == "text" || type == "number"){
            var strValue = trim(value.toString());
            if (mandatory && strValue.length == 0){

                // HOW DO I SHOW AN ERROR AT THE CURRENT FIELD?
                // and how do I scroll to it?
            }
        }

    });
});

编辑： 我在 node.js (5K LOC) 中有大量代码，我将其移植到客户端，这是我的组织所需要的。上面没有显示该代码。

编辑：我在网上看了一个小时，但我看到的 jQuery form validator 库无法按我需要的方式运行。我已经在 Node.js 中有表单清理和验证代码（支持电话号码、邮政编码等各种数据类型），我只是将其移植到客户端。

【问题讨论】：

你问的不是微不足道的。因此有大量的 jQuery 插件可以做到这一点。你看过他们的代码吗？它们包含大量代码是有原因的。
@gforce301 - 是的，我在 node.js 中有大量代码，我正在移植到客户端。上面没有显示该代码。

标签： javascript jquery html forms validation

【解决方案1】：

首先我会推荐使用一些免费的验证插件。但是，如果您出于某种原因想自己编写，那么您的问题的答案是：

首先，您需要将错误消息隐藏在标记中的某个位置。有很多方法可以做到这一点。最常见的解决方案是这样的：

<div>
<input type="text" required />
<p class="error">Error</p>
</div>

你需要显示它，在你的例子中它可以这样完成：

// process mandatory textfields
        if (type == "text" || type == "number"){
            var strValue = trim(value.toString());
            if (mandatory && strValue.length == 0){
                //show error
                $(this).parent().find('.error').show();
                //scroll
                 $('html, body').animate({
                  scrollTop: $(this).offset().top
                 }, 2000);
                 return; // stop validation(becouse you dont want to scroll more times)

         }
   }

您需要弄清楚更多事情（例如在再次验证之前隐藏所有错误），但这应该可以回答您的问题。

【讨论】：