我已经尝试使用以下代码来使必填字段通知必填字段，但它在Safari浏览器中不起作用。码：
<form action="" method="POST">
<input required />Your name:
<br />
<input type="submit" />
</form>
在firefox上面的代码工作。 http://jsfiddle.net/X8UXQ/179/
你能让我知道javascript代码或任何解决方法吗？我是javascript的新手
谢谢
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>
这种方法的唯一缺点是它不能处理需要填充的确切输入。它需要在表单中的所有输入上进行循环并检查值（更好的是，检查“required”属性是否存在）。
循环可能如下所示：
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
}
}
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
}
如果你使用jQuery，那么下面的代码要好得多。只需将此代码放在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;
});
此代码适用于那些不支持必需（html5）属性的浏览器
有一个很好的编码日朋友。
我和Safari有同样的问题，我只能求你们看看Webshim！
我找到了这个问题的解决方案，对于这个one非常有用，但如果你想“模拟”Safari的原生HTML5输入验证，Webshim可以节省你很多时间。
Webshim为Safari提供了一些“升级”，并帮助它处理诸如HMTL5日期选择器或表单验证之类的事情。它不仅易于实现，而且看起来还不错，可以立即使用它。
对于webshim here的初始设置，SO也是有用的答案！链接帖子的副本：
目前，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>
我已经在@Roni的解决方案之上建立了一个解决方案。
似乎Webshim是deprecating，因为它与jquery 3.0不兼容。
重要的是要了解Safari确实验证了所需的属性。不同之处在于它的功能。它不是阻止提交并在输入旁边显示错误消息工具提示，而只是让表单流继续。
话虽如此，checkValidity（）在Safari中实现，如果未满足所需的字段，则会返回false。
所以，为了“修复它”并且还显示一个错误消息，干预最少（没有额外的Div用于保存错误消息）并且没有额外的库（除了jQuery，但我相信它可以在普通的javascript中完成）。，I得到这个小黑客使用占位符来显示标准错误消息。
$("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
}
我找到了一个很棒的博客文章，解决了这个问题。它以一种我更舒服的方式解决它，并提供比其他建议更好的用户体验。它将更改字段的背景颜色以表示输入是否有效。
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/
（注意：我确实从帖子中扩展了CSS以覆盖textarea并选择字段）
我使用这个解决方案，工作正常
$('#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();
}
});
2017年3月26日发布的新Safari 10.1现在支持“必需”属性。
您可以将此事件处理程序添加到表单：
// 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);
在每个（）函数中，我在旧版本的PC Safari中找到了所有文本输入的DOM元素，我认为这个代码对于使用inputobj ['prpertyname']对象获取所有属性和值的MAC上的新版本很有用：
$('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
}
}
});