使用Opera和Safari进行HTML5验证

我在使用Opera和Safari进行HTML5验证时遇到问题。使用Opera和Safari进行HTML5验证

在Opera中，消息气泡没有显示任何文本，在safari中，当我按下提交按钮时，验证不会发生。在IE，Mozilla或Chrome中，验证工作得很好。谁能说出为什么会发生这种情况？

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

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

请帮帮我。

感谢

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

来源

2013-04-27 Marius Popa

你能告诉我们一些代码，以便我们可以试着弄清楚发生了什么吗？否则就不会有太多的事情要做。 – Turnerj 2013-04-27 12:59:37

我已编辑帖子以向您展示代码。我真的不知道什么是错的 – 2013-04-27 13:31:36

这是歌剧了bug：使用@字体面Web字体时，不显示的消息。我也遇到过这个问题。选择一个像Arial这样的正常字体，消息就会显示出来。 Safari不支持html5验证（safari部分支持，但没有验证泡泡）。我的提示是：使用webshims lib（http://afarkas.github.io/webshim/demos/） - 用于验证等许多功能的极佳聚合填充。

来源

2013-04-27 16:30:13 Anselm

yeei ......那是问题所在。十分感谢你分享这些信息。 – 2013-04-27 17:40:16

想知道如果有人知道Opera的工作。我不得不使用自定义字体输入。 – 2013-10-02 00:46:45

Opera 15+不再有这个问题了 – Anselm 2013-10-02 12:52:42

您可以添加以下（附图片）： 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>

来源

2015-08-04 13:59:39 burunoh

你正在使用图片？只需使用基本的文本和CSS来让它看起来你想要的方式。图像加载速度较慢，无法翻译 – 2017-03-09 23:43:52

我有同样的问题，并解决它以这种方式

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

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

})(); 
</script>

只需添加这个文档片断在你的页面结尾处。如果您已经导入它，您可以删除负载jQuery步骤！

来源

2015-10-14 08:06:51 dreampulse

使用Opera和Safari进行HTML5验证

回答

相关问题