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

Question

我已尝试使用以下代码使必填字段通知必填字段，但它在 safari 浏览器中不起作用。代码:

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

以上代码适用于 firefox。 http://jsfiddle.net/X8UXQ/179/

你能告诉我 javascript 代码或任何解决方法吗？是 javascript 的新手

谢谢

Answer 1

Safari，2017 年 3 月 26 日至 10.1 版本，不支持此属性，您需要使用 JavaScript。

此页面包含一个 hacky 解决方案，应该添加所需的功能:http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari

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
    }
}