如何在html表单中为所有空字段和必填字段显示“请填写此字段”？答案

【问题标题】：How to display "Please fill out this field" for all empty and required fields in html form?如何在html表单中为所有空字段和必填字段显示“请填写此字段”？
【发布时间】：2020-01-22 12:20:06
【问题描述】：

我有一个如小提琴 https://jsfiddle.net/vrn7zx5h/3/ 所示的表格，我想在其中显示警告标志“请填写此字段”同时为所有未填写的必填字段。 p>

我在SO 上找到了答案（如下所示），但我不确定如何与小提琴集成。

function checkName(val){
        if(/^[^-\s][\w\s]+$/.test(val)){
            return true;
        }else{
            if(val.length != 0){
                return false;
            }
        }
    }

问题陈述：

我想知道我应该在小提琴中进行哪些更改，以便上面粘贴的 SO answer 与小提琴一起使用。

【问题讨论】：

有一件事我必须问，你不想使用 HTML5 内置的表单验证器吗？你想让一些文字出现在屏幕上吗？您希望一次显示所有错误吗？
是的，我想一次显示所有错误。我不确定“您不想使用 HTML5 内置表单验证器”是什么意思？
HTML5 中有一个内置的表单验证。这是一个链接：developer.mozilla.org/en-US/docs/Learn/HTML/Forms/…
好的，我想知道你是否可以在小提琴中给我一个指针，我们如何做到这一点。
@flash 小提琴已经在这样做了（如果“那个”是指 HTML5 内置验证器）

标签： javascript html forms validation

【解决方案1】：

这是一个 JS fiddle，它会一次显示所有错误。它只是准系统而不是花哨的。您需要自己制作它。我还使用表单标签中的novalidate 禁用了内置验证器。 https://jsfiddle.net/6kxc9hmq/1/ 仅供参考：如果输入现在满足条件，我也没有添加在下次运行时隐藏错误消息的功能。

基本上，我在表单上附加了一个提交事件处理程序，如果验证器返回 false，我告诉表单不要提交。仅适用于 IE9+（我认为）所有其他浏览器通常都可以使用这种方法。验证器基本上只是检查输入的值是否满足我指定的条件。

document.getElementById('form').addEventListener('submit', function(e) {
if(!validate())
    e.preventDefault();
});

【讨论】：

【解决方案2】：

如果我明白你的意思，我认为它应该是这样的

<form action="">
    Username: <input type="text" name="usrname">
    Password: <input type="password" name="Password">
    <input type="submit">
</form>
<p><strong>Note:</strong> The required attribute of the input tag is not
supported in Internet Explorer 9 and earlier versions.</p>
<script>
    // append the listeners
    document.forms[0].addEventListener('submit', function(evt){
        if([
            checkName(this.querySelector('[name="usrname"')),
            checkName(this.querySelector('[name="Password"'))
        ].some((v)=>v)) {
            evt.preventDefault()
        }
    })

    // check is empty, then notify
    function checkName(element){
        // if you just have to check if is empty, this is enough
        if(element.value) {
            return
        }
        notify(element)
        return true
    }

    // print the message
    function notify(element) {
        if(element.nextElementSibling.classList.contains('notify')) {
            return;
        }
        element.parentNode.insertBefore(
            Object.assign(document.createElement('p'),
            {
                className: 'notify',
                innerHTML: 'Please fill out this field for all empty and required fields'
            }
        ), element.nextSibling)
    }
</script>

【讨论】：

【解决方案3】：

在您的表单中，在每个输入元素后添加空 div。您可以在验证中有条件地在 div 中显示消息。例如 if(name ==‘ ‘){div.innerHTML = ‘请输入您的姓名’}

【讨论】：

【解决方案4】：

必需的属性将所需的属性添加到您的表单。

required 属性告诉浏览器仅在填写相关字段时才提交表单。显然，这意味着该字段不能为空，但这也意味着，根据其他属性或字段的类型，只会接受某些类型的值。

【讨论】：