如何在使用 Javascript 的输入旁边显示必需的消息？ [复制]答案

【问题标题】：How to show a required message next to input with Javascript? [duplicate]如何在使用 Javascript 的输入旁边显示必需的消息？ [复制]
【发布时间】：2014-05-07 06:37:57
【问题描述】：

我正在尝试将字段设为必填，但我希望错误显示在它自己不提醒的字段旁边？

【问题讨论】：

使用 jquery 验证 ;) jqueryvalidation.org

标签： javascript jquery html validation xhtml

【解决方案1】：

您可以将验证消息放在您想要验证的inputs 附近

<span class="reqMsg">* First name is required</span>

当然你首先需要用 css 隐藏它们

.reqMsg {
   color:red;
   display:none;
}

然后在您的表单submit 函数中，您可以将相关代码更改为此

var valid = true;
var firstFocus = null;
for (var i = 0; i < rules.length; i++) {
   if (!rules[i][1]) {
      valid = false;
      var parent = elem(rules[i][0]).parentNode;
      parent.children[2].style.display = "inline";
      if (firstFocus == null) firstFocus = parent.children[1];
   }
}
if (!valid) {
   firstFocus.focus();
   return false;
}
return true;

您可以看到，如果一个字段无效，它不会立即返回 false。它检查所有字段，然后将focus 设置为无效字段的第一个元素。

FIDDLE

【讨论】：

【解决方案2】：

在输入标签旁边添加跨度标签

<span id="first-name-err"></span>

并改变你的javascript代码如下

function alpha(e) {
        var k;
        document.all ? k = e.keyCode : k = e.which;
        return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8);
    }
    var flag = true;
    for (var i = 0; i < rules.length; i++) {
        alert(rules[i][0]);
        if (!rules[i][1]) {
            var parent = elem(rules[i][0]).parentNode,
                message = 'Please check your ' + (parent.textContent || parent.innerText).replace(/^\s*(.*?)\s*$/, '$1').slice(0, -1).toLowerCase() + '.';
                var id = rules[i][0]+'-err';
    document.getElementById(rules[i][0]+'-err').innerHTML = message;
           flag = false;
        }
    }
    return flag;
};

检查this

【讨论】：