Question

我已经在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中验证代码（支持各种数据类型，如电话号码，邮政编码等），我只是移植到客户端。

Answer 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)

         }
   }

你需要弄清楚一些事情（比如在再次验证之前隐藏所有错误），但这应该回答你的问题。

如何在自定义表单验证程序的字段上显示错误？

1 个答案: