Javascript Html5 表单验证不适用于 iphone、android 或 safari
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7080166/
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
Html5 form validation not working with iphone, android or safari
提问by prabhat
I am trying to implement html5 form validation for my web app but it's not working with safari 5.0.1 , iphone3 or android2. Is the form input attribute required, pattern or anything related to validation not supported by these browsers or i am making some mistake?
我正在尝试为我的网络应用程序实现 html5 表单验证，但它不适用于 safari 5.0.1、iphone3 或 android2。这些浏览器不支持表单输入属性、模式或与验证相关的任何内容，还是我犯了一些错误？
It's working with mozilla, chrome and opera. If i use html5 form validation then again i need to write code as fallback. Is it a good idea to use this or the older way as jquery and plain javascript? If any one have idea please tell me.
它与 mozilla、chrome 和 opera 一起工作。如果我使用 html5 表单验证，那么我又需要编写代码作为后备。使用这种或旧方式作为 jquery 和普通 javascript 是个好主意吗？如果有人有想法，请告诉我。
Please check this link (i wrote some code) and try it in iphone, android or safari:
请检查此链接（我写了一些代码）并在 iphone、android 或 safari 中尝试：
http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html
http://24ways.org/examples/have-a-field-day-with-html5-forms/24ways-form.html
回答by oezi
If you're using jQuery, you could take a look at the h5Validate plugin. This adds cross-browser support for form validations down to IE6. According to the project's website:
如果您使用 jQuery，您可以查看h5Validate 插件。这增加了对 IE6 表单验证的跨浏览器支持。根据该项目的网站：
Regularly tested on 13 different browsers, IE6 - IE9, FireFox, Chrome, iPhone, and Android.
Implements best practices based on 1,000 user survey, several usability studies, and the behavior of millions of users in live production environments.
Supported Platforms:
Desktop: IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac.
Mobile: iPhone, Android, Palm WebOS
定期在 13 种不同的浏览器上进行测试，IE6 - IE9、FireFox、Chrome、iPhone 和 Android。
根据 1,000 名用户调查、多项可用性研究以及实时生产环境中数百万用户的行为实施最佳实践。
支持的平台：
桌面：IE 9、8、7、6、Chrome、Firefox、Safari 和 Opera。在 Windows 7 和 Mac 上测试。
手机：iPhone、Android、Palm WebOS
回答by Mike
Firefox and Opera both support HTML 5 and in particular form validation...
Firefox 和 Opera 都支持 HTML 5，尤其是表单验证...
I have just spent two days writing some new code only to realise IE and Safari don't yet implement HTML 5 validation...
我刚刚花了两天时间编写了一些新代码，却发现 IE 和 Safari 尚未实现 HTML 5 验证...
My choice is clear, either I recode using javascript (difficult as the form are dynamically created) or tell everyone to use Firefox or Opera, else the validation is not implemented...
我的选择很明确，要么我使用 javascript 重新编码（很难因为表单是动态创建的），要么告诉大家使用 Firefox 或 Opera，否则验证将不会实现......
My choice... keep my current code and wait for the others to catch up...
我的选择......保留我当前的代码并等待其他人赶上......
Firefox and IE10 support some of it.
Firefox 和 IE10 支持其中的一些。
Opera and Chrome support all of it.
Opera 和 Chrome 支持所有这些。
Safari supports all of it too, but form validation is disabled by default.
Safari 也支持所有这些，但默认情况下禁用表单验证。
Update... Just come across a post that suggests Safari do not support form validation, no wonder I could not find anyway to turn it on?
更新...刚看到一个帖子说Safari不支持表单验证，难怪我找不到打开它？
回答by cdeszaq
In order to be as cross-browser friendly as possible, you should always code with the expectation that the client platforms will not have support for newer things, like HTML5 validation. So, while leveraging the capabilities of newer browsers is great and lets you give your users a much nicer experience, it is still important to remember that not everyone has the same capabilities.
为了尽可能地跨浏览器友好，您应该始终期望客户端平台不支持更新的东西，例如 HTML5 验证。因此，虽然利用较新浏览器的功能很棒，可以让您为用户提供更好的体验，但仍然重要的是要记住，并非每个人都拥有相同的功能。
That being said, any sort of validation you do in the browser (with Javascript or HTML5) is only a convenience for the user and a savings on calls back to the server. You should ALWAYSimplement validation on the server because it is very easy to circumvent client-side validation. My preferred way of developing is to do the validation entirely server-side first, and then once that is solid, add in javascript--based, and then HTML5-based validation, using a "progressive development" approach to progressive enhancement.
话虽如此，您在浏览器中进行的任何类型的验证（使用 Javascript 或 HTML5）都只是为用户提供了便利，并节省了对服务器的调用。您应该始终在服务器上实现验证，因为很容易绕过客户端验证。我首选的开发方式是首先完全在服务器端进行验证，然后在确定后，添加基于 javascript 的验证，然后添加基于 HTML5 的验证，使用“渐进式开发”方法进行渐进式增强。
回答by Kevin Leary
I've hit the same issue with a job search application I'm in the process of building. The h5Validateplugin solved this exact problem. It plugins in the HTML5 validation holes for many browsers and devices:
我在构建的求职应用程序中遇到了同样的问题。该h5Validate插件解决了这个确切的问题。它在许多浏览器和设备的 HTML5 验证漏洞中插入：
- Desktop: IE 9, 8, 7, 6, Chrome, Firefox, Safari, and Opera. Tested on Windows 7 and Mac.
- Mobile: iPhone, Android, Palm WebOS
- 桌面：IE 9、8、7、6、Chrome、Firefox、Safari 和 Opera。在 Windows 7 和 Mac 上测试。
- 手机：iPhone、Android、Palm WebOS
If you've ever used the jQuery validation plugin, it's very similar. Think of it as an extension for HTML5 forms.
如果您曾经使用过 jQuery 验证插件，它会非常相似。将其视为 HTML5 表单的扩展。
回答by Nour
Why don't you try webshim?
I had the same problem and now everything is cool !
All you have do is downloading the library then put the js-webshimfolder in your project.
Include this code
你为什么不试试webshim？我有同样的问题，现在一切都很酷！您所要做的就是下载库，然后将js-webshim文件夹放入您的项目中。包含此代码
<script src="js-webshim/minified/polyfiller.js"></script>
<script>
webshim.activeLang('en');
webshims.polyfill('forms');
webshims.cfg.no$Switch = true;
</script>
I hope this will help you as well
我希望这也能帮助你
