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

问题描述：

我已经在JS中构建了一个表单验证器，其中的一部分显示在下面。我只需要帮助显示错误并滚动到该字段。如何在自定义表单验证器的字段上显示错误？

好了，所以每个<input>将有属性指定自己需要的验证，如：

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

有属性的表单提交的时间分析，如果我遇到一个errornous领域，我需要滚动到该字段并显示英文错误（不需要多语言）。

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

@ gforce301 - 是的，我在node.js中有很多不重要的代码，我将其移植到客户端。该代码不显示在上面。 –

答

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

首先你需要在你的标记中隐藏错误信息。有很多方法可以做到这一点。最常见的解决方案是类似的东西：

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

     } 
    }

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

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

相关推荐