Basic jQuery

<!DOCTYPE html>
<html lang="en">

<head>
  <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="script.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-10" main="">
          <div class="panel panel-default">
            <div class="panel-heading">System Roles
              <div id="addNewRole">
                Want to create a new role?
                <a href="#" id="createform">
                  <strong>Please click here</strong>
                </a>
              </div>
            </div>
            <div class="panel-body">
              <div class="alert headerMessage alert-dismissable" style="display: none;"></div>
              <div id="SaveRoleModal">

              </div>
              <div class="table-responsive">
                <table id="RoleList" class="table table-bordered">
                  <tbody>
                    <tr>
                      <th>Role</th>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

var createRoleForm = "createRoleForm";

function CreateRoleForm() {

}

function Roles() {
  var row = {
    "Role": "Role"
  };
  AddTableRow(row);
}

function AddTableRow(row) {
  var role = "<td>" + row.Role + "</td>";
  $("#RoleList").append("<tr>" + role + "</tr>");
}

$(document).ready(function() {
  $('#createform').click(function() {
    $.ajax({
      method: "GET",
      url: "createform.html",
      cache: false,
      async: true,
      beforeSend: function(xhr, opts) {
        $('.headerMessage').removeClass("alert-success").removeClass("alert-danger").html("").hide();
        $('#addNewRole').css("display", "none");
      },
      success: function(result) {
        $('#SaveRoleModal').html(result);
        return false;
      },
      error: function(result) {
        $('#addNewRole').css("display", "block");
        //$('.headerMessage').addClass("alert-danger").html(result.responseJSON.Message).show();
        return false;
      }
    });
  });
  Roles();
  $.validator.addMethod("regexRoleName", function(value, element, regexpr) {
    return regexpr.test(value);
  }, "Please enter valid role. Only alphabets allowed.");

  $("form#" + createRoleForm).validate({
    rules: {
      Role: {
        required: true
      }
    },
    messages: {
      Role: {
        required: "Please enter Role"
      }
    },
    submitHandler: function(form) {
      console.log('ok :)')
    }
  });

});

<form method="POST" accept-charset="UTF-8" class="form-horizontal form-label-left" id="createRoleForm">
	<input name="_token" type="hidden" value="4OZW1kppesFfu87tkiz756fIG4l09OLcqYEHeI61">
		<div class="form-group">
			<label for="Role" class="col-md-4 control-label">Please enter Role</label>
			<div class="col-md-6">
				<input class="form-control" name="Role" type="text">
			</div>
		</div>
		<div class="form-group">
			<div class="col-md-8 col-md-offset-4">
				<button type="submit" class="btn btn-primary">
					Save
				</button>
				
			</div>
		</div>
</form>