必需的属性在Safari浏览器中不起作用
我已经尝试了下面的代码，使所需的领域通知所需的领域，但其不工作在Safari浏览器。 码：
<form action="" method="POST"> <input required />Your name: <br /> <input type="submit" /> </form> 以上代码在Firefox中工作。 http://jsfiddle.net/X8UXQ/179/
你能让我知道的JavaScript代码或任何workarround？ 在javascript中是新的
谢谢
Safari不支持这个属性，你需要使用JavaScript。 这个页面包含一个hacky解决scheme，应该添加所需的function：
http://www.html5rocks.com/en/tutorials/forms/constraintvalidation/#toc-safari
HTML：
<form action="" method="POST" id="formID"> Your name: <input required = "true"/> <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);
您可以使用某种不太难看的警告来replace警报，如显示带有错误信息的DIV：
document.getElementById('errorMessageDiv').style.display = 'block';
并在HTML中：
<div id="errorMessageDiv" style="display:block;">Please, fill the form.</div>
（style属性的内容应该在CSS文件中）
这种方法的唯一缺点是不能处理需要填写的确切的input。 这将需要一个循环遍历表格中的所有input，并检查值（更好，检查“所需的”属性的存在）。
如果你使用jQuery，那么下面的代码就好多了。 把这个代码放在jquery.min.js文件的底部，它适用于每一个表单。
只需将这些代码放在常用的.js文件中，并在此文件之后embeddedjquery.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; });
该代码适用于那些不支持所需（html5）属性的浏览器
有一个很好的编码日的朋友。
我和Safari有同样的问题，我只能求求大家看看Webshim ！
我发现这个问题的解决scheme非常有用，但是如果您想“模拟”Safari的本机HTML5inputvalidation，Webshim会为您节省大量时间。
Webshim为Safari提供了一些“升级”，并帮助它处理诸如HMTL5dateselect器或表单validation之类的事情。 这不仅易于实施，而且看起来也足够好，可以马上使用。
对于最初设置为webshim 在这里 SO还有用的答案！ 链接文章的副本：
目前，Safari不支持“required”input属性。 http://caniuse.com/#search=required
要在Safari上使用“必需”属性，您可以使用“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>
我发现一个伟大的博客条目解决这个问题。 它解决了这个问题，让我更舒适，并提供比其他build议更好的用户体验。 它会改变字段的背景颜色来表示input是否有效。
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：
$(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'; }
信用： http : //blueashes.com/2013/web-development/html5-form-validation-fallback/
（注：我确实扩展了post中的CSS来覆盖textarea并select字段）
我已经在@Roni之上build立了一个解决scheme。
看来Webshim是不赞同的，因为它不会与jQuery 3.0兼容。
了解Safari确实需要的属性是很重要的。 区别在于它如何处理它。 而不是阻止提交，并显示在input旁边的错误消息工具提示，它只是让表单stream继续。
这就是说，checkValidity（）是在Safari中实现的，如果没有满足要求的字段，它会返回false。
所以，为了“修复它”，并显示一个错误消息，最小的干预（没有额外的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 }
我使用这个解决scheme，工作正常
$('#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(); } });
您可以将此事件处理程序添加到您的表单中：
// Chrome and Firefox will not submit invalid forms // so this code is for other browsers only (eg 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);
在每个（）函数中，我发现旧版本的PC Safari中的文本input的所有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 } } });
新的Safari 10.1于2017年3月26日发布，现在支持“required”属性。
