LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Fancy Label Login

* Required

CSS
html {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; }
*, *:before, *:after {
	padding: 0; margin: 0;
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit; }

body {
  max-width: 400px; padding: 2em 0; margin: 0 auto;
  color: #4d4d4d; font: 200 100%/1.375em 'Helvetica Neue', Helvetica, sans-serif;
  background: #eee; }

h1 {
  margin-bottom: 0.5em;
  color: #e1261c; font: 100 250%/1em 'Helvetica Neue', Helvetica, sans-serif;
  text-transform: uppercase; text-align: center; }

p { margin-bottom: 1.375em; }

form {
	padding: 2em 1.25em 1.25em; margin-bottom: 1em;
	background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); }

form p { position: relative; }
form p.error {
	padding: 1em; margin-bottom: 2em;
	color: #e1261c; font-size: 90%;
	background: #fee; }

.fancy-label {
	position: absolute; z-index: 1; top: -1em;
	display: block; padding: 0.13em 0.6em; margin: 0 0.5em;
	color: #999; font-size: 90%;
	background: #fff;
	cursor: default;
	-webkit-transition: all 100ms;
	-moz-transition: all 100ms;
	transition: all 100ms; }
.fancy-label.positioned {
	top: 0; padding: 1em 0.625em;
	color: #ccc; font-size: inherit;
	background: none;
	cursor: text; }
.required + .fancy-label:after { content: ' *'; }

.required-note { font-size: x-small; }

input[type="text"],
input[type="email"],
input[type="password"],
textarea {
	display: block; width: 100%; padding: 1em;
	font: 100%/1em Arial, Helvetica, sans-serif;
	border: 1px solid #000; }

input:-webkit-autofill { box-shadow: inset 0 0 0 100px #fff; }

input.error { border-color: #e1261c; }
input.error + label { color: #e1261c; }

button {
	position: relative;
	display: inline-block; width: 100%; padding: 1em;
	color: #fff; font: 100%/1em Arial, Helvetica, sans-serif;
	text-transform: uppercase; text-decoration: none;
	background: #e1261c; border: none;
	cursor: pointer; }
button:hover { color: #fff; }

button[disabled] { background: #777; color: #aaa; cursor: not-allowed; }

button.loading {
	position: relative;
	color: transparent;
	background-color: #777;
	background-image: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0) 75%);
	background-image: linear-gradient(-45deg, rgba(255,255,255,0.3), rgba(255,255,255,0.3) 25%, rgba(255,255,255,0) 25%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, rgba(255,255,255,0) 75%);
	background-size: 3em 3em;
	-webkit-animation: progress 1s infinite linear;
	animation: progress 1s infinite linear; }
button.loading:after {
	content: attr(data-loading-text);
	position: absolute; top: 0; left: 0;
	width: 100%; padding: 1em;
	color: #fff; text-align: center; }


/*************/
/* Animation */
/*************/

/* Progress */

@-webkit-keyframes progress {
  0% { background-position: 0 0; }
  100% { background-position: -3em 0; }
}

@keyframes progress {
  0% { background-position: 0 0; }
  100% { background-position: -3em 0; }
}
JS
///////////
// Setup //
///////////

var form = $('form');

// Detect JavaScript.
form.find('#submit').attr('disabled', 'disabled');


//////////////////
// Fancy Labels //
//////////////////

var fancyLabel = $('.fancy-label');

// Set up label position.
fancyLabel.each(function() {
  var self = $(this);
  if (self.prev('input').val()) self.removeClass('positioned');
  else self.addClass('positioned');
});

// Change label positon on focus/blur. 
fancyLabel.prev('input, textarea').on('focus', function() {
  var self = $(this);
  self.siblings('.fancy-label').removeClass('positioned');
}).on('blur', function() {
  var self = $(this);
  if (!self.val()) self.siblings('.fancy-label').addClass('positioned');
});


//////////////
// Validate //
//////////////

var validateTarget = $('.validate'),
    regEmail = /^((?:(?:(?:\w[\.\-\+]?)*)\w)+)\@((?:(?:(?:\w[\.\-\+]?){0,62})\w)+)\.(\w{2,12})$/;

// Form element event triggers.
validateTarget.on('keyup change input', function(e) {
  if (e.keyCode != 9 && e.keyCode != 16) validate();
});

// Validation.
function validate() {
  var activeElement = validateTarget.find(':focus'),
      empty = false;
  
  // Check if required fields have values.
  validateTarget.find('.required').each(function() {
    if (this.value === '') empty = true;
    if (this.type === 'checkbox' && !this.checked) empty = true;
  });
  
  // Test regex fiels & show/hide error.
  if (activeElement.hasClass('test')) {
    var activeLabel = activeElement.siblings('label');
    
    if ((activeElement.hasClass('email') && !regEmail.test(activeElement.val()))) {
      activeElement.addClass('error');
      activeLabel.text(activeLabel.data('error'));
    } else {
      activeElement.removeClass('error');
      activeLabel.text(activeLabel.data('valid'));
    };
  };
  
  // Enable/Disable submit button.
  if (!empty && $('input.error').length === 0) validateTarget.find('#submit').removeAttr('disabled');
  else validateTarget.find('#submit').attr('disabled', 'disabled');
};


////////////
// Submit //
////////////

var signInConnectionErrorText = 'Sorry, there was an issue connecting to the server. Please try again later.';

form.on('submit', function(e) {
  var self= $(this),
      data = self.serializeArray();
  
  self.find('p.error').remove();
  self.find('button').addClass('loading').attr('disabled', 'disabled');
  
  // Timeout is for demo to show loading action.
  setTimeout(function() {
  
  // Ajax request.
  $.ajax({
    type: 'POST',
    url: 'path to script', // Change this to server-side script.
    data: data,
    success: function(response) {
      if (response == 'success') {
        // Success action.
      } else {
        // Server-side errors.
      };
    },
    error: function() {
      self.prepend('

' + signInConnectionErrorText + '

'); // Communication error message. }, complete: function() { self.find('button').removeClass('loading').removeAttr('disabled'); // Remove button loading state. } }); }, 1000); e.preventDefault(); });
Host Instantly Drag and Drop Website Builder

 

Description

A simple login from with what looks like placeholders that are actually labels, front-end error validation, a loading animation on the submit button, and no-JS graceful degradation.
Term
Wed, 11/29/2017 - 11:25

Related Codes

Pen ID
Pen ID
Pen ID