必需的属性在Safari浏览器中不起作用

Question

我尝试使用以下代码将必填字段告知必填字段，但在Safari浏览器中不起作用。码：

 <form action="" method="POST">
        <input  required />Your name:
        <br />
        <input type="submit" />
    </form>

上面的代码在firefox中工作。

您可以让我知道JavaScript代码或任何workarround吗？ 是javascript新功能

谢谢

Answer 1

Safari（自2017年3月26日起最新版本10.1）不支持此属性，您需要使用JavaScript。

该页面包含一个hacky解决方案，该解决方案应添加所需的功能：

HTML：

<form action="" method="post" id="formID">
    <label>Your name: <input required></label><br>
    <label>Your age: <input required></label><br>
    <input type="submit">
</form>

JavaScript：

var form = document.getElementById('formID'); // form has to have ID: <form id="formID">
form.noValidate = true;
form.addEventListener('submit', function(event) { // listen for form submitting
        if (!event.target.checkValidity()) {
            event.preventDefault(); // dismiss the default functionality
            alert('Please, fill the form'); // error message
        }
    }, false);

您可以用不太丑陋的警告代替警报，例如显示带错误消息的DIV：

document.getElementById('errorMessageDiv').classList.remove("hidden");

在CSS中：

.hidden {
    display: none;
}

并在HTML中：

<div id="errorMessageDiv" class="hidden">Please, fill the form.</div>

这种方法的唯一缺点是它不能处理需要填写的确切输入。它将需要一个循环遍历表单中的所有输入并检查值（更好的是，检查“必需”属性的存在）。

循环看起来像这样：

var elems = form.querySelectorAll("input,textarea,select");
for (var i = 0; i < elems.length; i++) {
    if (elems[i].required && elems[i].value.length === 0) {
        alert('Please, fill the form'); // error message
        break; // show error message only once
    }
}