<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section class="container text-center"> <div class="login"> <h1><span id="formHeading">Login or </span><a id="formOption" onclick="formToggle()" href="#">Sign Up</a></h1> <!--Login form--> <form id="login_form" name="login_form" method="post" action="login()"> <p hidden class="well" id="login_validation_errors"></p> <input id="login_user" type="text" name="login_user" value="" placeholder="Username or Email"></br> <input id="login_password" type="password" name="login_password" value="" placeholder="Password"></br> <label> <input type="checkbox" name="login_remember_checkbox" id="login_remember_checkbox"> Remember me on this computer </label></br> <input id="login_submit" type="submit" name="login_submit" value="Login"> </form> <!--Signup form--> <form hidden name="signup_form" id="signup_form" mehtod="post" action="login()"> <p hidden class="well" id="signup_validation_errors"></p> <input id="signup_email" type="text" name="signup_email" value="" placeholder="Email"></br> <input id="signup_username" type="text" name="signup_username" value="" placeholder="Username or Email"></br> <input id="signup_password" type="password" name="signup_password" value="" placeholder="Password"></br> <input id="signup_password_confirm" type="password" name="signup_password_confirm" value="" placeholder="Confirm Password"></br> <label> <input type="checkbox" name="signup_terms_checkbox" id="signup_terms_checkbox"> I Agree to <a>terms and conditions</a> </label></br> <input id="signup_submit" type="submit" name="signup_submit" value="Sign up"> </form> <!--./signup form--> <hr> <p class="text-center">Forgot your password?<br> <a href="forgot.html">Click here to reset it</a>.</p> </div> </section>

/* // Validation (Makes use of validate.js library, http://rickharrison.github.io/validate.js/) var login_validator = new FormValidator('login_form', [{ name: 'login_user', display: 'Username/Email', rules: 'required' }, { name: 'login_password', display: 'password', rules: 'required' }], function(errors, event) { if (errors.length > 0) { // Show the errors var errorString = ''; for (var i = 0, errorLength = errors.length; i < errorLength; i++) { errorString += errors[i].message + '<br />'; } $('#login_validation_errors').show(250); $('#login_validation_errors').html(errorString); } }); var signup_validator = new FormValidator('signup_form', [{ name: 'signup_email', display: 'Email', rules: 'required|valid_email', }, { name: 'signup_username', display: 'Username', rules: 'required|min_length[4]' }, { name: 'signup_password', display: 'Password', rules: 'required|min_length[8]' }, { name: 'signup_password_confirm', display: 'password confirmation', rules: 'required|matches[password]' }], function(errors, event) { if (errors.length > 0) { // Show the errors var errorString = ''; for (var i = 0, errorLength = errors.length; i < errorLength; i++) { errorString += errors[i].message + '<br />'; } $('#signup_validation_errors').show(250); $('#signup_validation_errors').html(errorString); } }); */ // Form toggles between login and sign up, 0 for login and 1 for signup var formType = 0; function formToggle() { // flip function for formType value formType++; formType = formType % 2; // If it's a signup form if (formType === 1) { // Hide login elements $("#login_form").slideUp(250); $('#login_validation_errors').slideUp(250); // Modify text based elements for signup $("#formHeading").fadeOut(250, function () { $(this).text("Sign up or ").fadeIn(250); }); $("#formOption").fadeOut(250, function () { $(this).text("Login").fadeIn(250); }); // Show signup elements $("#signup_form").slideDown(250); } // If it's a login form if (formType === 0) { // Hide signup elements $("#signup_form").slideUp(250); $('#signup_validation_errors').slideUp(250); // Modify text based elements $("#formHeading").fadeOut(250, function () { $(this).text("Login or ").fadeIn(250); }); $("#formOption").fadeOut(250, function () { $(this).text("Sign up").fadeIn(250); }); // Show Login elements $('#login_form').slideDown(250); } };