Html 必需的属性在 Safari 浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23261301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Required Attribute Not work in Safari Browser
提问by Maninblack
I have tried following code for make the required field to notify the required field but its not working in safari browser. Code:
我已经尝试使用以下代码来制作必填字段以通知必填字段，但它在 safari 浏览器中不起作用。代码：
<form action="" method="POST">
<input required />Your name:
<br />
<input type="submit" />
</form>
Above the code work in firefox. http://jsfiddle.net/X8UXQ/179/
以上代码在 Firefox 中工作。http://jsfiddle.net/X8UXQ/179/
Can you let me know the javascript code or any workarround? am new in javascript
你能告诉我 javascript 代码或任何解决方法吗？我是 JavaScript 新手
Thanks
谢谢
采纳答案by mikiqex
Safari, up to version 10.1 from Mar 26, 2017, doesn't support this attribute, you need to use JavaScript.
Safari 从 2017 年 3 月 26 日起直到 10.1 版本不支持此属性，您需要使用 JavaScript。
This page contains a hacky solution, that should add the desired functionality: http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari
此页面包含一个 hacky 解决方案，应该添加所需的功能：http: //www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari
HTML:
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:
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);
You can replace the alert with some kind of less ugly warning, like show a DIV with error message:
您可以用某种不那么难看的警告替换警报，例如显示带有错误消息的 DIV：
document.getElementById('errorMessageDiv').classList.remove("hidden");
and in CSS:
在 CSS 中：
.hidden {
display: none;
}
and in HTML:
并在 HTML 中：
<div id="errorMessageDiv" class="hidden">Please, fill the form.</div>
The only drawback to this approach is it doesn't handle the exact input that needs to be filled. It would require a loop accross all inputs in the form and checking the value (and better, check for "required" attribute presence).
这种方法的唯一缺点是它不能处理需要填充的确切输入。它需要一个循环遍历表单中的所有输入并检查值（更好的是，检查“必需”属性是否存在）。
The loop may look like this:
循环可能如下所示：
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
}
}
回答by Roni
If you go with jQuery then below code is much better. Just put this code bottom of the jquery.min.js file and it works for each and every form.
如果您使用 jQuery，那么下面的代码要好得多。只需将此代码放在 jquery.min.js 文件的底部，它就适用于每个表单。
Just put this code on your common .js file and embed after this file jquery.js or jquery.min.js
只需将此代码放在您常用的 .js 文件中，然后嵌入此文件 jquery.js 或 jquery.min.js 之后
$("form").submit(function(e) {
var ref = $(this).find("[required]");
$(ref).each(function(){
if ( $(this).val() == '' )
{
alert("Required field should not be blank.");
$(this).focus();
e.preventDefault();
return false;
}
}); return true;
});
This code work with those browser which does not support required (html5) attribute
此代码适用于那些不支持 required (html5) 属性的浏览器
Have a nice coding day friends.
祝朋友们度过一个愉快的编码日。
回答by tommygun
I had the same problem with Safari and I can only beg you all to take a look at Webshim!
我在 Safari 上遇到了同样的问题，我只能请求大家看看Webshim！
I found the solutions for this question and for this onevery very useful, but if you want to "simulate" the native HTML5 input validation for Safari, Webshim saves you a lot of time.
我找到了解决方案，这个问题，并为这个一个非常非常有用的，但如果你想以“模拟” Safari的原生HTML5输入验证，Webshim为您节省大量的时间。
Webshim delivers some "upgrades" for Safari and helps it to handle things like the HMTL5 datepicker or the form validation. It's not just easy to implement but also looks good enough to just use it right away.
Webshim 为 Safari 提供了一些“升级”，并帮助它处理诸如 HMTL5 日期选择器或表单验证之类的事情。它不仅易于实现，而且看起来足够好，可以立即使用它。
Also useful answer on SO for initial set up for webshim here! Copy of the linked post:
在这里为 webshim 的初始设置也是有用的答案！链接帖子的副本：
At this time, Safari doesn't support the "required" input attribute. http://caniuse.com/#search=required
To use the 'required' attribute on Safari, You can use 'webshim'
1 - Download webshim
2 - Put this code :
目前，Safari 不支持“required”输入属性。http://caniuse.com/#search=required
要在 Safari 上使用 'required' 属性，您可以使用 'webshim'
1 - 下载 webshim
2 - 把这个代码：
<head>
<script src="js/jquery.js"></script>
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
webshim.activeLang('en');
webshims.polyfill('forms');
webshims.cfg.no$Switch = true;
</script>
</head>
回答by Juliomac
I have built a solution on top of @Roni's one.
我已经在@Roni的解决方案之上构建了一个解决方案。
It seems Webshim is deprecatingas it won't be compatible with jquery 3.0.
似乎 Webshim 正在弃用，因为它与 jquery 3.0 不兼容。
It is important to understand that Safari does validate the required attribute. The difference is what it does with it. Instead of blocking the submission and show up an error message tooltip next to the input, it simply let the form flow continues.
重要的是要了解 Safari 确实会验证所需的属性。不同之处在于它用它做什么。它不会阻止提交并在输入旁边显示错误消息工具提示，而是让表单流程继续。
That being said, the checkValidity() is implemented in Safari and does returns us false if a required filed is not fulfilled.
话虽如此，checkValidity() 是在 Safari 中实现的，如果没有满足要求的文件，它会返回 false。
So, in order to "fix it" and also show an error message with minimal intervention (no extra Div's for holding error messages) and no extra library (except jQuery, but I am sure it can be done in plain javascript)., I got this little hack using the placeholder to show standard error messages.
因此，为了“修复它”并以最少的干预显示错误消息（没有额外的 Div 来保存错误消息）并且没有额外的库（jQuery 除外，但我确信它可以在普通的 javascript 中完成），我使用占位符获得了这个小技巧来显示标准错误消息。
$("form").submit(function(e) {
if (!e.target.checkValidity()) {
console.log("I am Safari"); // Safari continues with form regardless of checkValidity being false
e.preventDefault(); // dismiss the default functionality
$('#yourFormId :input:visible[required="required"]').each(function () {
if (!this.validity.valid) {
$(this).focus();
$(this).attr("placeholder", this.validationMessage).addClass('placeholderError');
$(this).val(''); // clear value so it shows error message on Placeholder.
return false;
}
});
return; // its invalid, don't continue with submission
}
e.preventDefault(); // have to add it again as Chrome, Firefox will never see above
}
回答by Bryce
I found a great blog entry with a solution to this problem. It solves it in a way that I am more comfortable with and gives a better user experience than the other suggestions here. It will change the background color of the fields to denote if the input is valid or not.
我找到了一个很好的博客条目，其中包含解决此问题的方法。与这里的其他建议相比，它以一种我更习惯的方式解决了这个问题，并提供了更好的用户体验。它将更改字段的背景颜色以指示输入是否有效。
CSS:
CSS：
/* .invalid class prevents CSS from automatically applying */
.invalid input:required:invalid {
background: #BE4C54;
}
.invalid textarea:required:invalid {
background: #BE4C54;
}
.invalid select:required:invalid {
background: #BE4C54;
}
/* Mark valid inputs during .invalid state */
.invalid input:required:valid {
background: #17D654 ;
}
.invalid textarea:required:valid {
background: #17D654 ;
}
.invalid select:required:valid {
background: #17D654 ;
}
JS:
JS：
$(function () {
if (hasHtml5Validation()) {
$('.validate-form').submit(function (e) {
if (!this.checkValidity()) {
// Prevent default stops form from firing
e.preventDefault();
$(this).addClass('invalid');
$('#status').html('invalid');
}
else {
$(this).removeClass('invalid');
$('#status').html('submitted');
}
});
}
});
function hasHtml5Validation () {
return typeof document.createElement('input').checkValidity === 'function';
}
Credit: http://blueashes.com/2013/web-development/html5-form-validation-fallback/
信用：http: //blueashes.com/2013/web-development/html5-form-validation-fallback/
(Note: I did extend the CSS from the post to cover textarea and select fields)
（注意：我确实扩展了帖子中的 CSS 以覆盖 textarea 和选择字段）
回答by jamogon
I use this solution and works fine
我使用这个解决方案并且工作正常
$('#idForm').click(function(e) {
e.preventDefault();
var sendModalForm = true;
$('[required]').each(function() {
if ($(this).val() == '') {
sendModalForm = false;
alert("Required field should not be blank."); // or $('.error-message').show();
}
});
if (sendModalForm) {
$('#idForm').submit();
}
});
回答by fernanDOTdo
The new Safari 10.1 released Mar 26, 2017, now supports the "required" attribute.
2017 年 3 月 26 日发布的新 Safari 10.1 现在支持“required”属性。
回答by Matthias Bohlen
You can add this event handler to your form:
您可以将此事件处理程序添加到您的表单中：
// Chrome and Firefox will not submit invalid forms
// so this code is for other browsers only (e.g. Safari).
form.addEventListener('submit', function(event) {
if (!event.target.checkValidity()) {
event.preventDefault();
var inputFields = form.querySelectorAll('input');
for (i=0; i < inputFields.length; i++) {
if (!inputFields[i].validity.valid) {
inputFields[i].focus(); // set cursor to first invalid input field
return false;
}
}
}
}, false);
回答by Leslie
Within each() function I found all DOM element of text input in the old version of PC Safari, I think this code useful for newer versions on MAC using inputobj['prpertyname'] object to get all properties and values:
在 each() 函数中，我找到了旧版 PC Safari 中文本输入的所有 DOM 元素，我认为这段代码对于 MAC 上的新版本很有用，使用 inputobj['prpertyname'] 对象来获取所有属性和值：
$('form').find("[required]").each(function(index, inputobj) {
if (inputobj['required'] == true) { // check all required fields within the form
currentValue = $(this).val();
if (currentValue.length == 0) {
// $.each((inputobj), function(input, obj) { alert(input + ' - ' + obj); }); // uncomment this row to alert names and values of DOM object
var currentName = inputobj['placeholder']; // use for alerts
return false // here is an empty input
}
}
});
回答by Syed Shibli
function customValidate(){
var flag=true;
var fields = $('#frm-add').find('[required]'); //get required field by form_ID
for (var i=0; i< fields.length;i++){
debugger
if ($(fields[i]).val()==''){
flag = false;
$(fields[i]).focus();
}
}
return flag;
}
if (customValidate()){
// do yor work
}
