Question

输入字段 required 有一个新的HTML5属性，在提交表单时弹出一个气泡消息且该字段为空。有没有办法用不同的文字弹出相同的泡泡？我想将它用于不同的验证（不仅仅是它是否为空）。

以下是Chrome中此气泡（弹出窗口）的屏幕截图：

Bubble message

Answer 1

HTML5提供了一种名为setCustomValidity的方法来实现这一目标。此方法是一个低级API，用于添加新的验证约束并添加新的/更改错误消息。你必须调用你的脚本，删除/添加验证消息 - 使用setCustomValidity - （在“DOMready”和“输入/更改时）。

我编写了一个polyfill脚本，它不仅在所有浏览器中实现了这些HTML5表单方法，而且还添加了"customValidity"-helper，这使得使用自定义消息添加自定义验证约束变得更加容易。

注意：您无需实现webshims lib即可使用此脚本。它也适用于没有webshims lib。（但是如果你使用webshims lib，你将在包括IE6在内的所有浏览器中获得约束验证）。如果您不想使用此跨浏览器，只需使用validity-helper script即可。文档为here。

请注意，如果您通过设置自定义消息对消息进行了更改，则必须包含清除消息的方法，例如

myFormElement.setCustomValidity（ ''）;

如果您不清除该消息，则表单元素将被视为无效，表单将不会提交。

Answer 2

当然，您可以checkValidity()对某些输入进行操作，但是再次无法正常工作。如果您仍希望在验证完成后提交表单，则无法阻止默认设置，您仍然可以通过执行以下操作来处理此样式：

注意，在表单上您不希望应用验证css样式，只需将novalidate属性添加到表单中即可。

<强> HTML：

<form name="login" id="loginForm" method="POST">
    <input type="email" name="username" placeholder="Email">
    <input type="password" name="password" placeholder="Password">
    <input type="submit" value="LOG IN" class="hero left clearBoth">
</form>

如果您不使用SCSS，我强烈建议您查看它，它更易于管理，易于编写且不那么复杂。注意：在小提琴示例中，我确实拥有将编译的确切css。我还包括了一个泡泡风格的例子。

<强> SCSS：

form:not([novalidate])            {
  input, textarea                 {
    &:required                    {background: transparent url('/../../images/icons/red_asterisk.png') no-repeat 98% center;}
    &:required:valid              {background: transparent url('/../../images/icons/valid.png') no-repeat 98% center; @include box-shadow(0 0 5px #5cd053);border-color: #28921f;}
    &:not(:focus):valid           {box-shadow: none;border: 1px solid $g4;}
    &:focus:invalid               {background: transparent url('/../../images/icons/invalid.png') no-repeat 98% center;  @include box-shadow(0 0 5px #d45252); border-color: #b03535}  
  }
}
span.formHintBubble {position:absolute; background:$g7; margin-top:50px;@include borderRadius(10px); padding:5px 40px 5px 10px; color:white; @include opacity(0.9); @include box-shadow(1px 1px 6px 1px rgba(0,0,0,0.2));
  &:after {
     @include triangle(30px, $g7, up); content: " "; margin-bottom:27px; left:25px;
  }
  .cross {background:black; border:1px solid $g3; @include borderRadius(10px); width:15px; height:15px; color:#fff; display:block; line-height:15px; position:absolute; right:5px; top:50%; margin-top:-7.5px; padding:0; text-align:center; font-size:10px; cursor:pointer;}
}

<强> JAVASCRIPT：

在这里，我们可以做一些时髦的东西来使用默认消息，并在你自己的“气泡”或错误消息框中继承它们。

var form    = $('form');
var item    = form.find(':invalid').first();
var node    = item.get(0);                       
var pos     = item.position();                
var message = node.validationMessage || 'Invalid value.'; 
var bubble  = $('<span/>').html('<span class="formHintBubble" style="left: ' + pos.left  + 'px; top:' + pos.top + 'px;">' + message + '<div class="cross">X</div></span>').contents();        
bubble.insertAfter(item);

该消息将是默认的html5消息，或者你可以通过将其传递给上面的'message'变量来覆盖它，非常简单！呵呵！

DEMO：

http://jsfiddle.net/shannonhochkins/wJkVS/

享受，我希望我能帮助其他人进行HTML5表单验证，因为它很棒，而且它需要走出去！

香农

Answer 3

您可以使用隔离的Flyweight模式

外在状态：您要显示的工具提示对象（因此您定义了html对象，css样式和对象属性）
intrinsisc state ，这对于您的所有气泡对象都有所不同，并且包含气泡文字

通过这种方式，如果你进行了大量的验证检查，你可以尽可能地节省你的记忆。

可以在Apress“Pro edsign Javascript Patterns”中找到一个很好的例子 - ch.9 示例 - 工具提示对象。

当您的JavaScript对象需要创建HTML时，flyweight模式特别有用。拥有大量的对象，每个对象创建一些DOM元素可能会很快陷入困境你的页面使用太多内存。 flyweight模式允许您只创建一些这些对象并在他们需要的所有地方分享。一个完美的例子可以在工具提示中找到。工具提示是您将光标悬停在工具上时看到的悬停文本块桌面应用程序。它通常会为您提供有关该工具的信息，以便用户可以不先点击它就知道它做了什么。这在网络应用程序中也非常有用，并且在JavaScript中实现起来相当容易。

Answer 4

根据您的提及，我认为您最好编写一个javascript函数来接受您的消息作为参数。然后从里面调用你的html泡泡。

HTML5泡泡消息

4 个答案: