HTML5在Opera和Safari中的验证

Question

我在Opera和Safari上遇到了HTML5验证问题。在Opera中，消息泡不显示任何文本，在Safari中，当我按提交按钮时，验证不会发生。在IE、Mozilla或Chrome中，验证工作正常。有谁能告诉我为什么会这样呢？

我表单中的输入具有HTML5标准验证，带有required属性。

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

请帮帮我。

谢谢。

    <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>

- Marius Popa

---

你能展示一些代码让我们尝试着弄清楚发生了什么吗？否则真的没有太多线索。 - Turnerj

我已经编辑了帖子以展示代码。我真的想不出哪里有问题。 - Marius Popa

Answer 1

在Opera浏览器中存在一个奇怪的错误：使用@font-face网页字体时，信息未显示。我也遇到了这个问题。选择普通字体（如Arial），则信息可以显示。Safari不支持HTML5验证（Safari有局部支持，但没有验证泡泡）。我的建议是：使用webshims lib（http://afarkas.github.io/webshim/demos/）-这是一个很棒的polyfill，可以为许多功能提供支持，如验证。

- Anselm

---

哎呀，那就是问题所在了。非常感谢您提供的信息。 - Marius Popa

想知道是否有人知道 Opera 的解决方法。我被迫为输入使用自定义字体。 - Maksim Vi.

Opera 15+不再有这个问题。 - Anselm

我在Opera 20中仍然遇到这个问题。它不会提交表单，并轻微地用蓝色突出显示有问题的字段，但没有验证工具提示。最新版本的Chrome、IE和Firefox中都会出现该提示。 - Rob Grant

Answer 2

我遇到过同样的问题，通过以下方式解决了它。

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

  // https://dev59.com/vGkw5IYBdhLWcg3wg6ug
  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();
      });
    });
  }

})();
</script>

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

- dreampulse

Answer 3

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

<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;
    }
  }
});
</script>

- burunoh

---

你正在使用图片吗？只需使用基本文本和CSS即可使其看起来符合您的要求。图像加载速度较慢，无法翻译。 - Peter Graham