表单提交在 safari 中不起作用并且在所有其他浏览器中起作用？答案

【问题标题】：Form submit not working in safari and works in all other browsers?表单提交在 safari 中不起作用并且在所有其他浏览器中起作用？
【发布时间】：2014-06-03 07:15:13
【问题描述】：

<!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/>
            &nbsp;<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>

上面的表单在除 safari（使用的版本是-5.1.7）和 iPad 之外的所有浏览器中都可以正常工作。在 safari 中，表单没有验证 html5 所需的属性并使表单提交，而在其他浏览器中（chrome ，firefox，IE）它工作正常。所以谁能告诉我如何用 safari 完成它？任何帮助将不胜感激..

【问题讨论】：

HTML required 不应该是你唯一的验证，只是一个旁注

标签： javascript html safari submit

【解决方案1】：

HTML 表单验证是 Working Draft。这是一种设置必填字段和字段类型的方法无需需要 JavaScript。

Safari 中的部分支持是指在尝试提交带有必填字段的表单时没有通知。部分支持 IE10 移动版是指阻止提交时没有警告。

在 Firefox 或 Opera 中也不完全支持使用不同颜色的边框 - 使用单独的样式类在两者中都很好。

在 Chrome 中，formnovalidate 属性不适用于 <input type="submit"> 元素，但适用于 <button type="submit"> 元素。

您可以尝试对所有不支持 HTML5 required 属性的浏览器使用下面的脚本：

//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
});

编辑： 作为替代方案，您可以使用jQuery validation plugin，以这种基本方式（有关如何使用它的更多详细信息，请点击链接）：

  $(document).ready(function() {
// validate the form when it is submitted
$("#form").validate(); 
  });

这是最兼容浏览器的方案。

【讨论】：

以上代码兼容jQuery $.browser）
...或者作为替代方案，包括jQuery Migrate 插件以及最新的jQuery 和代码。
@bodiO 我尝试使用 jquery 1.8.2 显示相同的结果...如果它对您有用并且如果时间允许，您能否在 jsfiddle 中更新我的代码???提前谢谢。 ...
@bodiO 感谢您的回答，但很抱歉我得到了正确的输出..!!