HTML5 Bubble Messages

There is a new HTML5 attribute for input field required which pops u开发者_如何学JAVAp a bubble message when submitting form and the field is empty. Is there any way of popping up the same bubble with different text? I want to use it for different validations (not just if it's empty or not).

Here is a screenshot on this bubble (pop-up) in Chrome:

---

HTML5 provides a method called setCustomValidity to achieve exactly this. This method is a low level API to add new validation constraints and to add new/change errormessages. You have to call your script, which removes / adds the validation message - using setCustomValidity - (on "DOMready" and) on input/change.

I have written a polyfill script, which not only implements those HTML5 form methods in all browsers, but also adds a "customValidity"-helper, which makes it more easy to add custom validation constraints with custom messages.

Note: You don't need to implement webshims lib to make use of this script. It also works without webshims lib. (But if you use webshims lib, you will get constraint validation in all browsers including IE6). If you don't want to have this cross-browser, simply take only the validity-helper script. Documentation is here.

Note that if you do make a change to the message by setting a custom message, you have to include a way to clear the message such as

myFormElement.setCustomValidity('');

if you don't clear the message, the form element will be seen as invalid and the form will not submit.

---

Of course, you can checkValidity() on certain inputs, but again doesn't work as you would want. Short of preventing the default if you still want to submit the form once validation is complete, you can still process this style by doing the following:

Note, on forms you don't want the validation css styles to be applied, you can simply add the novalidate attribute to the form.

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>

If you're not using SCSS, I would highly recommend looking into it, it's much more manageable, easy to write and less convoluted. Note: In the fiddle example, i do have the exact css that this will compile. I've also included a bubble style example.

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:

Here, we can do some funky stuff to use the default messages and inherit them inside your own 'bubble' or error message box.

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

The message will be the default html5 messages, or you can override it by passing it to the 'message' variable above, pretty easy hugh!

DEMO:

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

Enjoy and I hope I help others with HTML5 form validation as it's awesome, and it needs to get out there!

Shannon

---

You could use the Flyweight pattern in which you isolate

• extrinsic state: The tooltip object which you'd like to show (So you define your html object, css style and object properties)
• intrinsisc state, which is different for all your bubble objects and containt the bubble text

In this way, if you've a lot of validation checks, you can economize your memory as much is possible.

A nice example can be found on Apress "Pro edsign Javascript Patterns" - ch.9 Example - Tooltip Object.

The flyweight pattern is especially useful when your JavaScript objects need to create HTML. Having a large number of objects that each create a few DOM elements can quickly bog down your page by using too much memory. The flyweight pattern allows you to create only a few of these objects and share them across all of the places they are needed. A perfect example of this can be found in tooltips. A tooltip is the hovering block of text you see when you hold your cursor over a tool in a desktop application. It usually gives you information about the tool, so that the user can know what it does without clicking on it first. This can be very useful in web apps as well, and it is fairly easy to implement in JavaScript.

---

From what you've mentioned, I think it's best you write a javascript function to accept your message as a parameter. Then call your html bubble from within it.