SignUp Form Validation using jQuery(public)

<!DOCTYPE html>
<html ng-app="singupApp">

  <head>
    <title>Form validations</title>
    <script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <style>
          /* Styles go here */
        .error{
        color:red;
        }
      </style>
    <script src="script.js"></script>
    <script>
  
  var g_singupForm  = new SignUpForm();
  $(document).ready(function(){
    g_singupForm.initEvents();
  });
    
  </script>
  </head>

  <body>
    <div class="container">
      <!-- Header -->
      <!--<div class="page-header"></div>-->
      <h1>Form validations using jQuery</h1>
      <form id="signupForm" name="signupForm" class="signupform fields" novalidate="novalidate">
        <fieldset class="scheduler-border">
          <legend class="signup-legend">Signup Form</legend>
          <!-- First Name -->
          <div class="form-group">
            <label for="firstName">First name</label>
            <span class="isRequired">*</span>
            <input id="firstName" name="firstName" class="form-control" type="text" required="required" tabindex="1" placeholder="First Name" />
            <div id="firstNameError" class="help-block error"></div>
          </div>
          <!-- Last Name -->
          <div class="form-group">
            <label for="lastName">Last name</label>
            <span class="isRequired">*</span>
            <input id="lastName" name="lastName" class="form-control" type="text" required="required" tabindex="2" placeholder="Last Name" />
            <div id="lastNameError" class="help-block error"></div>
          </div>
          <!-- Password -->
          <div class="form-group">
            <label for="password">Password</label>
            <span class="isRequired">*</span>
            <input id="password" name="password" class="form-control" type="password" required="required" tabindex="3" placeholder="Password" />
            <div id="passwordError" class="help-block error"></div>
          </div>
          <!-- Submit -->
          <div class="form-group">
            <input id="submitButton" type="button" value="submit" tabindex="4" role="button" data-disabled1="disabled" class="btn btn-primary" />
          </div>
        </fieldset>
      </form>
    </div>
  </body>

</html>

// Code goes here
SignUpForm = function () {

    this.clickCount = 0;
    var pattern = /^[A-z]+$/;

    var validateFirstName = function () {
        var hasError = false;
        var $firstName = $("#firstName");
        var text = $.trim($firstName.val());
        if (text === "") {
            $("#firstNameError").html('<span>First name is required.</span>');
            hasError = true;
        } else {
            if (!pattern.test(text)) {
                $("#firstNameError").html('<span>First name should contain only alphabets.</span>');
                hasError = true;
            } else {
                $("#firstNameError").html("")
            }
        }

        return hasError;
    };

    var validateLastName = function () {
        var hasError = false;
        var $lastName = $("#lastName");
        var text = $.trim($lastName.val());
        if (text === "") {
            $("#lastNameError").html('<span>Last name is required.</span>');
            hasError = true;
        } else {
            if (!pattern.test(text)) {
                $("#lastNameError").html('<span>Last name should contain only alphabets.</span>');
                hasError = true;
            } else {
                $("#lastNameError").html("")
            }
        }

        return hasError;
    };

    var validatePassword = function () {
        var hasError = false;
        var $password = $("#password");
        var text = $.trim($password.val());
        if (text === "") {
            $("#passwordError").html('<span>Password is required.</span>');
            hasError = true;
        } else {
            if (text.length > 15) {
                $("#passwordError").html('<span>Password can not be more than 15 characters.</span>');
                hasError = true;
            } else {
                $("#passwordError").html("")
            }
        }

        return hasError;
    };

    this.initEvents = function () {
        var me = this;
        $('#firstName').on('blur', validateFirstName);
        $('#lastName').on('blur', validateLastName);
        $('#password').on('blur', validatePassword);

        $("#submitButton").on("click", function () {
            //validate firstName
            var hasError = false;
            hasError = validateFirstName() || hasError;
            hasError = validateLastName() || hasError;
            hasError = validatePassword() || hasError;

            if (!hasError) {
                alert("Hi " + $('#firstName').val() + ' ' + $('#lastName').val() + ", Your form is Submitted Successfully.");
            }

        });


    };

}

/* Styles go here */
.error{
color:red;
}