显示非空输入框错误的通用方法答案

【问题标题】：Generic method to display error for a not null input box显示非空输入框错误的通用方法
【发布时间】：2013-05-29 11:56:38
【问题描述】：

期望的结果

我正在尝试在 Javascript (JQUERY) 中创建一个通用方法，该方法检查页面中的所有元素是否可以为空。

作为一个例子，我正在使用登录。

用户名和密码都不能为空。在我的脑海中，我认为可能有一个错误标签，它是标准隐藏的，带有for='<inputbox name here>'。然后我可以遍历所有具有显示标签属于输入的类的标签。

示例

<label for="i_1_s_1">Name: </label>
<input type="text" name="i_1_s_1">
<label class="notnullerror" for="i_1_s_1">hidden</label>
<label for="i_1_s_2">Password: </label>
<input type="text" name="i_1_s_2">
<label class="notnullerror" for="i_1_s_2">hidden</label>

问题

我不知道对此的最佳做法是什么。基本上我想要的是一个

foreach (var element = document.getElementsByClass('notnullerror')
{
     document.getElementsByName(element.for.value);

}

但是，这是在 javascript 而不是 jquery 中完成的，当然，这是行不通的。我怎样才能使它成为我想要的方式？

而且，如果这不是在不可为空的输入上显示错误消息的最佳做法，请评论是什么。

【问题讨论】：

标签： javascript jquery html notnull

【解决方案1】：

这将起作用：它会查找所有 notnullerror 元素并获取与每个元素的 for 属性相对应的元素。

$(function() {
   $('.notnullerror').each(function() {
       var forEl=  $('input[name="' + $(this).attr('for') + '"]');
       //do something here
   });
});

【讨论】：

在这种情况下，我会使用像 data-required=true 这样的属性作为选择器而不是类。

【解决方案2】：

更常见的是在提交表单时验证表单控件，而不是运行单独的测试。您可以遍历控件并根据属性值验证每个控件，例如如果它有一个 notnullerror 类，测试它并在必要时显示适当的错误消息。

例如（假设您有 hasClassName 函数或类似函数）：

var element, elements = form.elements;

for (var i=0, iLen=elements.length; i<iLen; i++) {
    element = elements[i];

  if (hasClassName(element, 'notnullerror') &&  element.value == '') {
      // deal with error
  }

  // perform other validation tests

}

顺便说一句，表单控件的值始终是一个字符串，因此永远不能是== 或=== 到null，尽管它可能等于字符串"null"。

【讨论】：