logo标签列表

HTML5表单验证在iPhone、Android或Safari上无法工作

javascripthtml
12

我尝试在我的网站应用程序中实现HTML5表单验证，但在Safari 5.0.1、iPhone3或Android2上无法正常运行。是这些浏览器不支持表单输入属性required、pattern或任何与验证相关的内容，还是我犯了一些错误？

它可以在Mozilla、Chrome和Opera中工作。如果我使用HTML5表单验证，那么我还需要编写回退代码。是使用这种方式好呢，还是使用旧的方式如jQuery和JavaScript？如果有人有想法，请告诉我。

请检查此链接（我编写了一些代码），并在iPhone、Android或Safari中尝试：

http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html

5
如果你希望将来得到答案，你应该开始标记正确的答案。人们会努力解决你的问题，你至少应该感激他们 :) - NomadTraveler
5个回答
16
如果您使用jQuery，可以看一下h5Validate插件。它为表单验证添加了跨浏览器支持，甚至支持IE6。根据该项目网站的介绍：

  • 在13个不同的浏览器上进行定期测试，包括IE6 - IE9、FireFox、Chrome、iPhone和Android。

  • 基于1000个用户调查、多个可用性研究以及数百万用户在实际生产环境中的行为，实现最佳实践。

支持的平台：

  • 桌面：IE 9、8、7、6、Chrome、Firefox、Safari和Opera。在Windows 7和Mac上进行测试。

  • 移动设备：iPhone、Android、Palm WebOS

5
火狐和欧朋浏览器都支持HTML5，特别是表单验证...
我刚刚花了两天时间编写一些新的代码才意识到IE和Safari还没有实现HTML 5验证...
我的选择很明显，要么我使用JavaScript重新编码（因为表单是动态创建的，所以比较困难），要么就告诉所有人使用Firefox或Opera，否则验证无法实现...
我的选择是...保持当前的代码并等待其他浏览器赶上...
火狐和IE10支持其中的一部分。
欧朋和Chrome全部支持。
Safari也支持全部功能，但表单验证默认被禁用。
更新... 我刚刚发现一篇文章表明Safari不支持表单验证，难怪我找不到任何方法开启它？
四年过去了，仍然没有表单验证（Safari怎么回事？） - Frankenmint
2
为了尽可能地适应不同的浏览器，您应该始终编写代码，并预期客户端平台不支持新功能，例如HTML5验证。因此，虽然利用新浏览器的功能非常好，并且可以让您为用户提供更好的体验，但仍然重要的是记住并非每个人都具有相同的能力。
话虽如此，在浏览器中进行任何形式的验证（使用Javascript或HTML5）仅是方便用户和节省服务器调用的一种方式。您应该始终在服务器上实施验证，因为很容易绕过客户端验证。我首选的开发方式是先完全在服务器端进行验证，然后一旦稳定，再添加基于javascript和基于HTML5的验证，使用“渐进增强”的方法进行渐进增强。
@prabhat - 如果某个回答解决了你的问题，或者是最佳答案，请将其标记为已接受。如果某个回答有帮助（即使不是你接受的答案），请投票支持它。 - cdeszaq
0
为什么不试试 webshim ？我之前也遇到了同样的问题，但现在一切都很好！你只需要下载这个库，然后将 js-webshim 文件夹放入你的项目中即可。包含以下代码。
<script src="js-webshim/minified/polyfiller.js"></script> 

<script> 
    webshim.activeLang('en');
    webshims.polyfill('forms');
    webshims.cfg.no$Switch = true;
</script>

我希望这也能对你有所帮助。

0

我在建立的一個工作搜尋應用中也遇到了同樣的問題。 h5Validate 插件解決了這個確切的問題，它為許多瀏覽器和設備補上了 HTML5 驗證漏洞：

  • 桌面：IE 9、8、7、6、Chrome、Firefox、Safari 和 Opera。在 Windows 7 和 Mac 上進行了測試。
  • 移動：iPhone、Android、Palm WebOS

如果您曾經使用過 jQuery 驗證插件，那麼它非常相似。把它當作 HTML5 表單的擴展。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接