Question

<!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完成它？任何帮助将不胜感激..

Answer 1

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

Safari中的部分支持是指在尝试提交包含必填字段的表单时缺少通知。 IE10 mobile中的部分支持是指在阻止提交时缺少警告。

在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(); });

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

表单提交不在safari中工作，并在所有其他浏览器中工作？

1 个答案: