草庐IT

关于 html:HTML5 Validation with Opera and Safari

codeneng 2023-03-28 原文

HTML5 Validation with Opera and Safari

我在 Opera 和 Safari 上的 HTML5 验证有问题。

在 Opera 中，消息气泡不显示任何文本，而在 Safari 中，当我按下提交按钮时不会发生验证。在 IE、Mozilla 或 Chrome 中，验证工作得很好。谁能告诉为什么会这样？

我在表单中的输入具有 html5 标准验证，具有 required 属性，就是这样。

我试图在网上搜索这个主题，但没有找到。

请帮帮我。

谢谢

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    <form class="sign-in-form" action="" method="post">
       
<li>

            <label>
                <span>Username</span>
                <input placeholder="Please enter your username" name="username" type="text" tabindex="1" title="It must contain the username that you have chosen at registration" required autofocus>
            </label>
       
</li>

       
<li>

            <label>
                <span>Password</span>
                <input placeholder="Please enter your password" name="password" type="password" tabindex="2" title="It must contain the password that you have chosen at registration" required>
            </label>
       
</li>

       
<li>

            <button name="sign-in-btn" type="submit" id="sign-in-submit">Sign In</button>
       
</li>

    </form>

  • 您能否向我们展示一些代码，以便我们尝试找出发生了什么？否则真的没什么可做的。
  • 我已经编辑了帖子以向您展示代码。我真的不知道出了什么问题

这是 opera 中的一个奇怪错误：使用 @font-face 网络字体时不显示消息。我也遇到过这个问题。选择像 Arial 这样的普通字体，就会显示消息。 Safari 不支持 html5 验证(Safari 部分支持但没有验证气泡)。我的建议是：使用 webshims lib (http://afarkas.github.io/webshim/demos/) - 用于验证等许多功能的出色 polyfill。

  • yeei ...这就是问题所在。十分感谢你分享这些信息。
  • 想知道是否有人知道 Opera 的解决方法。我被迫使用自定义字体进行输入。
  • Opera 15 没有这个问题了
  • 我仍然在 Opera 20 中得到这个。它不提交表单，并巧妙地以蓝色突出显示违规字段，但没有验证工具提示。该工具提示出现在最新的 Chrome、IE 和 Firefox 中。

我遇到了同样的问题，就这样解决了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
(function() {

  var loadScript = function(src, loadCallback) {
    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = src;
    s.onload = loadCallback;
    document.body.appendChild(s);
  };

  // http://stackoverflow.com/questions/9847580/how-to-detect-safari-chrome-ie-firefox-and-opera-browser
  var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
  var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;

  if (isSafari || isOpera) {

    loadScript('//code.jquery.com/jquery-2.1.4.min.js', function () {
      loadScript('//cdnjs.cloudflare.com/ajax/libs/webshim/1.15.10/dev/polyfiller.js', function () {

        webshims.setOptions('forms', {
          overrideMessages: true,
          replaceValidationUI: false
        });
        webshims.setOptions({
          waitReady: true
        });
        webshims.polyfill();
      });
    });
  }

})();

只需在页面末尾添加此片段即可。如果您已经导入了加载 jQuery 步骤，则可以删除它！

您可以添加以下内容(附图片)：
http://i.stack.imgur.com/sMe9Z.png

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<style type="text/css">
    input.invalid, select.invalid, textarea.invalid {
      border-color: #ff0000;
      background-image: url('../img/required.png');
      background-position: right top;
      background-repeat: no-repeat;
      -moz-box-shadow: none;
    }
    input:required:valid, textarea:required:valid, select:required:valid {
      border: 1px solid #cccccc;
      background-image: none;
    }
    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
</style>

<form action="" method="get" accept-charset="utf-8">
    <input type="text" name="name" required>
</form>

<script type="text/javascript">
// Force Validation
function html5Validation () {
  //Check if validation supported && not safari
  return (typeof document.createElement('input').checkValidity === 'function') &&
    !(navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0);
}

$('form').submit(function(){
  if(!html5Validation())
  {
    var isValid = true;
    var $inputs = $(this).find('[required]');
    $inputs.each(function(){
      var $input = $(this);
      $input.removeClass('invalid');
      if(!$.trim($input.val()).length)
      {
        isValid = false;
        $input.addClass('invalid');                
      }
    });
    if(!isValid)
    {
      return false;
    }
  }
});

  • 你用的是图片？只需使用基本文本和 css 让它看起来像你想要的那样。图片加载速度较慢，无法翻译

ValidationSafarispanclassnbspcsshtmloperasafarivalidation

有关关于 html:HTML5 Validation with Opera and Safari的更多相关文章

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

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

  2. 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的路径中定义。这

  3. 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并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  6. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  7. ruby - 如何使用 Nokogiri 解析纯 HTML 表格？ - 2

    我想用Nokogiri解析HTML页面。页面的一部分有一个表，它没有使用任何特定的ID。是否可以提取如下内容:Today,3,455,34Today,1,1300,3664Today,10,100000,3444,Yesterday,3454,5656,3Yesterday,3545,1000,10Yesterday,3411,36223,15来自这个HTML:TodayYesterdayQntySizeLengthLengthSizeQnty345534345456563113003664354510001010100000344434113622315

  8. ruby-on-rails - 连接字符串时如何在 <%=%> block 内输出 html_safe？ - 2

    考虑一下:现在这些情况:#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2#output:http://domain.com/?foo=1&bar=2我需要用其他字符串输出URL。我如何保证＆符号不会被转义？由于我无法控制的原因，我无法发送&。求助!把我的头发拉到这里:\编辑:为了澄清，我实际上有一个像这样的数组:@images=[{:id=>"fooid",:url=>"http://

  9. ruby-on-rails - 关于 Ruby 的一般问题 - 2

    我在我的rails应用程序中安装了来自github.com的acts_as_versioned插件，但有一段代码我不完全理解，我希望有人能帮我解决这个问题class_eval我知道block内的方法(或任何它是什么)被定义为类内的实例方法，但我在插件的任何地方都找不到定义为常量的CLASS_METHODS，而且我也不确定是什么here，并且有问题的代码从lib/acts_as_versioned.rb的第199行开始。如果有人愿意告诉我这里的内幕，我将不胜感激。谢谢-C 最佳答案 这是一个异端。http://en.wikipedia

  10. ruby-on-rails - 我需要从 HTML 转到 markdown，有什么建议吗？ - 2

    我正在使用Maruku，将Markdown(超集)转换为HTML，你知道我该怎么做才能从HTML转换为Markdown吗？ 最佳答案 Google发现了一个名为reverse_markdown的ruby​​脚本.它似乎可以满足您的需求。 关于ruby-on-rails-我需要从HTML转到markdown，有什么建议吗？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/175162

随机推荐