register.html

<!DOCTYPE html>
<html>
<head>
<title>.::PkKit::.</title>

<!-- BootStrap -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css" type="text/css" />
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700|Lato:400,100,300,700,900' rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="css/animate.css">

    <link rel="stylesheet" href="css/style.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="gen_validatorv4.js" type="text/javascript"></script>
</head>


<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">PKKIT</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li><a href="myphotos.php">My Photos</a></li>
        <li><a href="aboutus.php">About Us</a></li>
        <li><a href="faqs.php">FAQs</a></li>
        <li><a href="support.php">Support</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="register.html"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="login.html"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<div id="body" class="container-fluid">
<div class="login-box animated fadeInUp container-fluid">
            <div class="box-header">
                <h2>Register</h2>
            </div>
            <form id='registerForm' role="form" action="register.php" method="POST">
            <label for="FirstName">First Name</label>
            <label for="LastName">Last Name</label>
            <br/>
            <div id='registerForm_FirstName_errorloc' ></div>
            <input type="text" id="FirstName" name="FirstName">
            <div id='registerForm_LastName_errorloc' ></div>
            <input type="text" id="LastName" name="LastName">
            <br/>

            <label for="AccountID">E-Mail</label>
            <br />
            <div id='registerForm_AccountID_errorloc' ></div>
            <input type="text" id="AccountID" name="AccountID">
            <br />

            <label for="Password">Password</label>
            <input type="password" id="Password" name="Password">
            <label for="cpassword">Confirm Password</label>
            <input type="password" id="cpassword">
            <br/>
            <label for"secret_q">Secret Question?</label>
            <br>
            <select name="secret_q">
                <option value="Pets name?">Pets name?</option>
                <option value="Favourite colour?">Favourite colour?</option>
                <option value="Place of birth?">Place of birth?</option>
                <option value="City I met my partner?">City I met my partner?</option>
            </select>
            <br />
            <br />

    <label for="secret_a">Answer</label>
            <!-- <input type="text" id="secret_q" name="secret_q"> !-->
            <input type="text" id="secret_a" name ="secret_a">
            <input type="submit" value="Register"/>
            <br/>
            </form><script type="text/javascript">
            <!-- form validation using a validation script from www.javascript-coder.com -->
                var frmvalidator  = new Validator("registerForm");
                frmvalidator.EnableOnPageErrorDisplay();
                frmvalidator.EnableMsgsTogether();
                <!-- validation for first name -->
                frmvalidator.addValidation("FirstName","req","Please enter your First Name");
                frmvalidator.addValidation("FirstName","maxlen=20","Max length for FirstName is 20");
                frmvalidator.addValidation("FirstName","minlen=2","Min length for FirstName is 2");
                frmvalidator.addValidation("FirstName","alpha","Only alphabetic charaters allowed");
                <!-- validation for last name -->
                frmvalidator.addValidation("LastName","req");
                frmvalidator.addValidation("LastName","maxlen=20");
                frmvalidator.addValidation("LastName","minlen=2","Min length for FirstName is 2");
                frmvalidator.addValidation("LastName","alpha","Only alphabetic charaters allowed");
                <!-- validation for account ID / email -->
                frmvalidator.addValidation("AccountID","maxlen=50");
                frmvalidator.addValidation("AccountID","req");
                frmvalidator.addValidation("AccountID","email");
            </script>
            <a href="login.html"><p class="small">Already registered?</p></a>
        </div>
    </div>

</div>


<script>
    $(document).ready(function () {
        $('#logo').addClass('animated fadeInDown');
        $("input:text:visible:first").focus();
    });
    $('#username').focus(function() {
        $('label[for="username"]').addClass('selected');
    });
    $('#username').blur(function() {
        $('label[for="username"]').removeClass('selected');
    });
    $('#password').focus(function() {
        $('label[for="password"]').addClass('selected');
    });
    $('#password').blur(function() {
        $('label[for="password"]').removeClass('selected');
    });
</script>

</html>