LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
.login-logo, .form-container {
  margin: 0 auto;
  max-width: 25em;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}

.off-canvas {
  -webkit-transform: translateZ(0) translate(0, -400px) rotateY(-360deg);
          transform: translateZ(0) translate(0, -400px) rotateY(-360deg);
  height: 0;
}

.login-logo {
  padding: 1em;
}
.login-logo img {
  width: 100%;
  height: auto;
}

.form-container {
  background: white;
  padding: 1.5em;
  border-radius: 1em;
  box-shadow: 0px 0px 1em #ddd;
}
.form-container h2 {
  margin-top: 0;
  color: #008CBA;
}
.form-container .error {
  color: red;
  margin: .5em 0;
}
.form-container label span {
  color: #d9534f;
}
.form-container button {
  background: #008CBA;
}
.form-container button:hover {
  background: #0079a1;
}

html {
  box-sizing: border-box;
}

*, :before, :after {
  box-sizing: inherit;
}

body {
  background: #eee;
  margin: 1em;
  font-family: 'Open Sans', sans-serif;
}
JS
var $loginForm = $(".form-signin"),
    $login_text_fields = $loginForm.find("input[type='text']");

	$(".login-logo,.form-container").removeClass("off-canvas");

    $loginForm.validate({
      errorElement: "span",
      success: function(label) {
        _form_success_aria(label);
      },
      invalidHandler : function(event, validator){
        _form_error_aria(event);
      }
    });

    function _form_success_aria(label){
      var target = label.parent().find("input");
      target.attr("aria-invalid","false");
    }

    function _form_error_aria(validator){
 		console.log(validator.target.elements[0]);
    }
Host Instantly Drag and Drop Website Builder

 

Description

Working on a little login screen using jQuery validate, Bootstrap, and adding accessibility functionality.
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID