javascript 表单提交不能在 safari 中工作并且可以在所有其他浏览器中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24009156/
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
Form submit not working in safari and works in all other browsers?
提问by User2413
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="images/fav_icon.png">
<script>
function submitAlbum(){
var frm=document.getElementById("custRegistration");
frm.action="CustomerinfoServlet?formidentity=domobileappRegistrations";
frm.submit();
}
</script>
</head>
<body style=" background-color:#f9f9f9" onload="DrawCaptcha();">
<!--start mainwrap-->
<div id="mainwrap">
<!--start midwrap-->
<div id="midwrap">
<div style="width: 100%; background-repeat:no-repeat; margin-top:15px; height:546px; background-image: url('images/form_background.png')">
<br/><br/><br/>
<div style="margin: 0 auto; background-color: #ffffff; opacity:0.9; border: 1px solid #D7EBFF; width: 400px; padding: 15px; height: 440px; margin-left: 56%;">
<form class="form" name ="custRegistration" id="custRegistration" onsubmit="return submitAlbum(this)" action="download.jsp" method="post" >
<p class="name">
<label for="name">Name <span style="color:red">*</span>:</label>
<input type="text" name="name" id="name" placeholder="" pattern="[A-Za-z ]{3,20}" required/>
<input type="hidden" id="formidentity" name="formidentity" value="domobileappRegistrations"/>
</p>
<p class="email">
<label for="email">Email Id <span style="color:red">*</span>:</label>
<input type="email" name="email" id="email" pattern="((\w+\.)*\w+)@(\w+\.)+(com|org|net|us|info|biz|co)" required aria-required="true" placeholder="" required/>
</p>
<p class="submit">
<label for="download" id="freetrail"></label>
<input type="submit" value="Submit" />
</p>
</form>
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</body>
</html>
Above form is working fine in all the browsers except safari(version used is-5.1.7) and iPad.In safari the form is not validating the html5 required attribute and making the form to submit, while in other browsers(chrome,firefox,IE) its working fine.so can anyone tell me how can i make it done with safari??any help would be appreciated..
以上表单在除 safari（使用的版本是-5.1.7）和 iPad 之外的所有浏览器中都可以正常工作。 IE）它工作正常。所以谁能告诉我如何用 safari 完成它？任何帮助将不胜感激..
回答by Bud Damyanov
The HTML form validation is a Working Draft. It is a method of setting required fields and field types withoutrequiring JavaScript.
HTML 表单验证是一个Working Draft。它是一种无需 JavaScript即可设置必填字段和字段类型的方法。
Partial support in Safari refers to lack of notice when form with required fields is attempted to be submitted. Partial support in IE10 mobile refers to lack of warning when blocking submission.
Safari 中的部分支持是指在尝试提交带有必填字段的表单时没有通知。IE10 移动版中的部分支持是指在阻止提交时缺少警告。
Also support for using differently colored borders is not complete in Firefox or Opera - using a separate class for styling works well in both.
此外，在 Firefox 或 Opera 中对使用不同颜色边框的支持并不完整 - 使用单独的样式类在两者中都可以很好地工作。
In Chrome the attribute formnovalidatedoesn't work on <input type="submit">elements but does on <button type="submit">elements.
在 Chrome 中，该属性formnovalidate对<input type="submit">元素无效，但对<button type="submit">元素有效。
You can try to use the script bellow for all browsers not supporting HTML5 requiredattribute:
您可以尝试对所有不支持 HTML5required属性的浏览器使用以下脚本：
//Required attribute fallback
$('#form').submit(function() {
if (!attributeSupported("required") || ($.browser.safari)) {
//If required attribute is not supported or browser is Safari
//(Safari thinks that it has this attribute, but it does not work),
//then check all fields that has required attribute
$("#form [required]").each(function(index) {
if (!$(this).val()) {
//If at least one required value is empty, then ask to fill all required fields.
alert("Please fill all required fields.");
return false;
}
});
}
return false; //This is a test form and I'm not going to submit it
});
EDIT:As alternative, you can use the jQuery validation plugin, in such basic way (more details on how-to use it are if you follow the link):
编辑：作为替代方案，您可以使用jQuery 验证插件，以这种基本方式（如果您点击链接，将获得有关如何使用它的更多详细信息）：
$(document).ready(function() {
// validate the form when it is submitted
$("#form").validate();
});
This is the most browser's compatible solution.
这是浏览器最兼容的解决方案。
