草庐IT

HTML5 输入验证在 IE8 中不起作用

coder 2023-08-08 原文

你好互联网的人们， 我研究这个已经有一段时间了……也看过几个类似的帖子，但我似乎无法弄明白:

HTML5 输入字段验证 CSS 可在 Firefox、Chrome 中运行...但遗憾的是，它不适用于 IE8...而且我的大部分目标受众都将使用 IE8。

...是的:我正在使用 Modernizr，我使用 Initializr 来获取页面模板和 CSS...我有点困惑为什么我不能在 IE8 中正常工作。

这是我的测试页面的链接: Test html5 page

输入框在正确输入之前是红色的，然后当输入一个有效的账号时验证简单地变成绿色，例如: 50011111111

HTML5代码如下:

<label for="account">Account Number: </label> 
<input id="account" name="inputAccount" 
  placeholder="input billing account number" 
  pattern="/(^500)|^\d{11}" 
  required
  autofocus
  type="text"/>

任何关于修复可能相当简单的问题的建议都将不胜感激!

最佳答案

IE 只是忽略 HTML5 元素，因为它不知道它们。来自 Modernizr 文档

Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 (as well as abbr) for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS.

这意味着 Modernizr 会告诉 IE HTML5 中的新标签，以便您可以在它们上使用 CSS，但实际上不会让它们做任何事情。另请注意，Modernizr 不会为元素添加默认样式，因此他们建议您使用 HTML5 CSS 重置，使 <section>标签 display: block;例如。

关于您的表单验证，topek 在解释 Modernizr 仅检测浏览器功能时是正确的，它实际上并没有对此做任何事情。 Modernizr 背后的过程是使用内置的 yepnope 测试功能来查看用户的浏览器是否可以执行“x”(在本例中为表单验证)，然后有条件地异步加载脚本或样式以“polyfill”(礼貌的为它说“使用 javascript 来模仿 native 行为”的方式。

在您的情况下，您需要使用 Modernizr.load()测试 Modernizr.input.required可能是Modernizr.input.autofocus也像这样:

 //the modernizr conditional load function
 Modernizr.load({
     //specify the tests, refer to the Modernizr docs for object names
   test: Modernizr.input.required && Modernizr.input.placeholder,
     //specify what to do if the browser fails the test, can be a function
   nope: 'path/to/polyfill/script',
     //sometimes you need to run some JS to init that script
   complete: function(){ polyfillinitorwhatever(); }
 });

好了，一个精简的 Modernizr.load。虽然我发现他们的文档很冗长，但它们实际上非常好。每次我遇到问题并向 Paul Irish 发送推文时，他都会发回一个指向文档的链接，我在仔细检查后确实找到了我的答案。

验证是浏览器制造商作为标准实现的最复杂的 HTML5 功能之一。虽然我真的很喜欢它的简单性，但我一直在所有情况下继续使用 jQuery.validate，除非用户使用 Chrome 或 Opera - FF native 验证仍然很弱。我建议您暂时坚持使用 jQuery。

关于HTML5 输入验证在 IE8 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7959955/

HTML5HTMLModernizrsectioncodeinternet-explorer-8

有关HTML5 输入验证在 IE8 中不起作用的更多相关文章

  1. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  2. ruby - 具有身份验证的私有(private) Ruby Gem 服务器 - 2

    我想安装一个带有一些身份验证的私有(private)Rubygem服务器。我希望能够使用公共(public)Ubuntu服务器托管内部gem。我读到了http://docs.rubygems.org/read/chapter/18.但是那个没有身份验证-如我所见。然后我读到了https://github.com/cwninja/geminabox.但是当我使用基本身份验证(他们在他们的Wiki中有)时，它会提示从我的服务器获取源。所以。如何制作带有身份验证的私有(private)Rubygem服务器？这是不可能的吗？谢谢。编辑:Geminabox问题。我尝试“捆绑”以安装新的gem..

  3. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  4. ruby-on-rails - 如果为空或不验证数值，则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初，我将所有3列的:default=>0放在表格中，但我不想要这样，因为它已经填充了字段，我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  5. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  6. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  7. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  8. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  9. ruby-on-rails - s3_direct_upload 在生产服务器中不工作 - 2

    在Rails4.0.2中，我使用s3_direct_upload和aws-sdkgems直接为s3存储桶上传文件。在开发环境中它工作正常，但在生产环境中它会抛出如下错误，ActionView::Template::Error(noimplicitconversionofnilintoString)在View中，create_cv_url,:id=>"s3_uploader",:key=>"cv_uploads/{unique_id}/${filename}",:key_starts_with=>"cv_uploads/",:callback_param=>"cv[direct_uplo

  10. ruby-on-rails - 如何将验证与模型分开 - 2

    我有一些非常大的模型，我必须将它们迁移到最新版本的Rails。这些模型有相当多的验证(User有大约50个验证)。是否可以将所有这些验证移动到另一个文件中？说app/models/validations/user_validations.rb。如果可以，有人可以提供示例吗？ 最佳答案 您可以为此使用关注点:#app/models/validations/user_validations.rbrequire'active_support/concern'moduleUserValidationsextendActiveSupport:

随机推荐