Bootstrap Validator example

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link data-require="bootstrap@3.2.0" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
    <script data-require="bootstrap@3.2.0" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.5.3/jquery.mockjax.js"></script>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>    
    <link rel="stylesheet" href="style.css" />
    <script src="ajaxresponse.js"></script>
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Dynamic Forms with BootstrapValidator</h1>
    <button id="addFormButton" class="btn btn-default">Add Form</button>
    <div id="formDiv"></div>
  </body>

</html>

// Code goes here
$(function() {
    $("#addFormButton").click(function() {
      $.getJSON("/dynamicform", function (data) {
          // Append form to the DOM
          $("#formDiv").append(data.dynamicForm);
          // Call Bootstrap Validator
          $("#formDiv form").bootstrapValidator();
      });
    });
});

/* Styles go here */

var formContents = '<form id="html5Form" method="post" class="form-horizontal" ' +
'      data-bv-message="This value is not valid"'+
'      data-bv-feedbackicons-valid="glyphicon glyphicon-ok"'+
'      data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"'+
'      data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">'+
'    <div class="form-group">'+
'        <label class="col-lg-3 control-label">Username</label>'+
'        <div class="col-lg-5">'+
'            <input type="text" class="form-control" name="username"'+
'                data-bv-message="The username is not valid"'+
'                required'+
'                data-bv-notempty-message="The username is required and cannot be empty"'+
'                pattern="^[a-zA-Z0-9]+$"'+
'                data-bv-regexp-message="The username can only consist of alphabetical, number" />'+
'        </div>'+
'    </div>'+
'    <div class="form-group">'+
'        <label class="col-lg-3 control-label">Email address</label>'+
'        <div class="col-lg-5">'+
'            <input class="form-control" name="email"'+
'                required'+
'                type="email" data-bv-emailaddress-message="The input is not a valid email address" />'+
'        </div>'+
'    </div>'+
'    <div class="form-group">'+
'        <label class="col-lg-3 control-label">Website</label>'+
'        <div class="col-lg-5">'+
'            <input class="form-control" name="website"'+
'                required'+
'                type="url" data-bv-uri-message="The input is not a valid website address" />'+
'        </div>'+
'    </div>'+
'    <div class="form-group">'+
'        <label class="col-lg-3 control-label">Fav color</label>'+
'        <div class="col-lg-3">'+
'            <input class="form-control" name="color"'+
'                required'+
'                type="color" data-bv-hexcolor-message="The input is not a valid color code" />'+
'        </div>'+
'    </div>'+
'    <div class="form-group">'+
'        <label class="col-lg-3 control-label">Age</label>'+
'        <div class="col-lg-2">'+
'            <input type="text" class="form-control" name="age"'+
'                required'+
'                min="10"'+
'                data-bv-greaterthan-inclusive="true"'+
'                data-bv-greaterthan-message="The input must be greater than or equal to 10"'+
'                max="100"'+
'                data-bv-lessthan-inclusive="false"'+
'                data-bv-lessthan-message="The input must be less than 100" />'+
'        </div>'+
'    </div>'+
'</form>';
$.mockjax({
    url:  '/dynamicform',
    responseText: { dynamicForm: formContents }
});