Question

是否可以让HTML / PHP页面显示默认的“请填写此字段”消息的多个实例？在 尝试提交 时，每个必填字段旁边/下方都是空的。使用JavaScript或jQuery的解决方案是首选。

输入元素已经具有required属性，其中第一个未填充的元素附带默认验证消息。

可以看到期望结果的示例here

说实话，我觉得这没有任何意义，但我们的一位客户非常坚持这一要求。

Answer 1

您需要为每个字段创建自己的JS验证并显示必要的响应。

这是我测试一个字段是否为空的方法：

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

Answer 2

您发布的链接看起来像展示reportValidity的使用。请记住，某些浏览器不支持它。

var formElement = document.querySelector('#the-form');
formElement.reportValidity();

由于reportValidity可能会失败（如果未在浏览器中实现），您可以快速进行检查：

if (formElement.reportValidity) //check that the function exists on the form object
    formElement.reportValidity()

这取决于具有html5验证属性的输入元素，如<input type="text" minlength=4 required>。

如果您需要更完整的验证流程，则必须编写更复杂的软件或重新使用现有解决方案。

显示所有空白和必填字段的“请填写此字段”

2 个答案: