验证时在 span 元素中显示错误消息的问题答案

【问题标题】：Problem with display error message in span element when validation验证时在 span 元素中显示错误消息的问题
【发布时间】：2020-03-12 10:53:56
【问题描述】：

您能否建议如何在 ID 为 #genderError 的元素之后显示错误消息，但将其插入其中？

errorPlacement: function(error, element) {
    if (element.attr("name") == "myoptions" ) error.insertAfter('#genderError'); 
    },

【问题讨论】：

使用$('#genderError').append(error) 到add it 到元素的末尾或$('#genderError').prepend(error) 将它添加到开始。或$('#genderError').html(error) 到swap 内容为error 的元素的内部HTML。但这应该用谷歌搜索，而不是在这里问。 insert jquery 给你大约 3 百万个帖子

标签： javascript jquery validation

【解决方案1】：

document.getElementById('#genderError').innerHTML = error;

或者，如果您使用的是 jQuery：

$('#genderError').html(error);

或

$('#genderError').text(error);`

如果你只需要设置文本。

【讨论】：

【解决方案2】：

您可以在errorPlacement 中管理多个条件。

如下 -

errorPlacement: function(error, element) {
            if (element.attr("name") == "genderError") {
                $('#genderError').html(error); //or
                //$('#genderError').after(error);
            }
            else {
                if (element.hasClass("chosen-select")) {
                    error.insertAfter(element.next('div.chosen-container'));         
                }
                else {
                    error.insertAfter(element);  
                }
            }
        }

【讨论】：

@Dimtriy，感谢您批准我的回答。

【解决方案3】：

我可以介绍一个 CSS 表单验证作为解决方案吗？

<form>
  <label for="male">male</label>
  <input type="radio" name="gender" value="male" id="male" required>
  <label for="female">female</label>
  <input type="radio" id="female" name="gender" value="male" required>
  <span class="errMsg"></span>
</form>

input:invalid ~ .errMsg::after {
  content: '\2717';
  color: red;
}

input:valid ~ .errMsg::after {
  content: '\2713';
  color: green;
}

【讨论】：