<link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
<script src="js/bootstrap.js" type="text/javascript"></script>
...
<form id="email-form">
  <input type="text" 
    id="username"
    pattern="[a-zA-Z ]{5,}" 
    placeholder="username" 
    maxlength="30" 
    title="Username" 
    required 
    data-content="A username is required. The username must be a series of alpha-numeric characters only." 
    data-role="validate" 
    class="form-control">

  <input type="email" 
    id="email" 
    placeholder="email address" 
    title="Email" 
    required
    data-content="An email address is required." 
    data-role="validate" 
    class="form-control">

  <div class="push-down-top">
    <button type="button" class="btn btn-link">Cancel</button>
    <button type="button" 
      id="change-button"
      data-role="trigger-validation"
      class="btn">Login</button>
  </div>
</form>

<div>The form is: <span id="msg"></span></div>

input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #c33;
  border-color: #c33;
}

input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
  border-color: #c33;
  -webkit-box-shadow: 0 0 6px #fcc;
     -moz-box-shadow: 0 0 6px #fcc;
          box-shadow: 0 0 6px #fcc;
}

input:invalid,
textarea:invalid,
select:invalid {
  border-bottom: 1px solid #c33;
}

input:valid + .invalid /* Adjacent sibling selector */ {
  visibility: hidden;
}

input:invalid + .invalid {
  visibility: visible;
}

input:required {
  border-left: 4px solid #c33;
}

input:valid {
  border-bottom: transparent;
}

.invalid {
  color: #999;
}

// this demo uses jQuery as the Bootstrap plug-ins are based off jQuery

$(function(){
    var ValidationUtility = function() {
        var elements, elementCount;
        
        elements = $('[data-role="validate"]'),
        elementCount = 0;
    
        elements.popover({
            placement: 'top'
        });
    
        elements.on('invalid', function() {
            if (elementCount === 0) {
                $('#' + this.id).popover('show');
                elementCount++;
            }
        });
    
        elements.on('blur', function() {
            $(this).popover('hide');
        });
    
        var validate = function(formSelector) {
            elementCount = 0;
    
            if (formSelector.indexOf('#') === -1) {
                formSelector = '#' + formSelector;
            }
    
            return $(formSelector)[0].checkValidity();
        };
    
        return {
            validate: validate
        };
    };
    
    var validator = new ValidationUtility();
    
    $('[data-role="trigger-validation"]').click(function() {
    
        if (validator.validate('email-form')) {
            $('#msg').text('Valid');
        }
        else {
            $('#msg').text('Invalid');
        }
    }); 
})