Show errors in JavaScript in HTML5 form

If you want to show the validation bubbles, at first the form should be submitted. Change the type of the button to submit and listen to submit event.

Also note that jQuery doesn't have checkValidity method, you should at first get the raw DOM element:

// on submit event browser will validate the form and show the bubbles
$('#my_form').on('submit', function() {
    if (this.checkValidity() == false) {
        return false;
    }

   // ...

});

http://jsfiddle.net/m5duh44x/