Man*_*ack 40 html safari html5
我已经尝试使用以下代码来使必填字段通知所需的字段但它在Safari浏览器中不起作用.码:
<form action="" method="POST">
<input required />Your name:
<br />
<input type="submit" />
</form>
在firefox上面的代码工作.http://jsfiddle.net/X8UXQ/179/
你能让我知道javascript代码或任何workarround吗？我是javascript的新手
谢谢
mik*_*qex 38
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
}
}
小智 34
如果你使用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)属性的浏览器
有一个很好的编码日朋友.
tom*_*gun 14
Safari遇到了同样的问题,我只能请大家看看Webshim!
我找到了解决方案,这个问题,并为这个一个非常非常有用的,但如果你想以"模拟" Safari的原生HTML5输入验证,Webshim为您节省大量的时间.
Webshim为Safari提供了一些"升级",并帮助它处理诸如HMTL5日期选择器或表单验证之类的事情.它不仅易于实现,而且看起来还不错,可以立即使用它.
对于webshim的初始设置,这里也是有用的答案!链接帖子的副本:
目前,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正在弃用,因为它与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
}
| 归档时间： |
|
| 查看次数： |
88623 次 |
| 最近记录： |