Material Design Form Inputs (with Phone validation)

index.html

<section class="site-container padding-tb">
 
 <section class="card wow fadeInLeft">
   
   <h3 class="wow fadeInDown" data-wow-delay="0.4s">Login Form</h3>

   <form action="#" class="form" method="post">
       <div class="form__wrapper wow fadeInDown" data-wow-delay="0.5s">
           <input type="email" class="form__input" id="email" name="email">
           <label class="form__label" for="email">
         <span class="form__label-content">Email</span>
       </label>
        </div>

       <div class="form__wrapper wow fadeInDown" data-wow-delay="0.6s">
           <input type="password" class="form__input" id="password"  name="password">
           <label class="form__label" for="password">
         <span class="form__label-content">Password</span>
       </label>
          
       <div class="form__wrapper wow fadeInDown" data-wow-delay="0.6s">
           <input id="phone" maxlength="14" name="phone" type="tel" class="form__input" value="" aria-required="true" aria-invalid="false">
           <label class="form__label" for="phone">
         <span class="form__label-content">Phone (XXX) XXX-XXXX</span>
       </label>
          
        </div>

       <div class="form__wrapper--submit wow fadeInLeft" data-wow-delay="0.7s">
         <div class="form__input-submit">
             <button type="submit" name="submit" class="btn btn-block">Submit</button>
           </div>
       </div>
   </form>
   <div class="text-center text-small wow fadeInLeft" data-wow-delay="0.8s"><a href="#" class="modal__toggle">Forgot Password ?</a></div>
    
   <div class="modal">
     <a href="#" class="modal--close modal__toggle">&times;</a>
     
     <h3>Recover Password</h3>

     <p class="text-small">Your new password will be send to this email.</p>

     <form action="#" class="form2" method="post">
         <div class="form__wrapper">
             <input type="email" class="form__input" id="email" name="email">
             <label class="form__label" for="email">
           <span class="form__label-content">Email</span>
         </label>
           
           
         </div>

       <div class="form__wrapper--submit">
           <div class="form__input-submit">
               <button type="submit" name="submit" class="btn btn-block">Submit</button>
             </div>
         </div>

       </form>

   </div><!-- /modal -->

 </section><!-- /card -->

 <footer class="footer padding-tb">
   <div class="footer__content">
     <p class="text-center text-small">Inspired from Ben Mildren pen at <a href="https://codepen.io/mildrenben/pen/gbddEj">codepen</a>.</p>
     <p class="text-center text-small">Created by <a href="https://mithicher.github.io">mithicher</a> | Tweet me <a href="https://twitter.com/mithicher">@mithicher</a>. 
     Plugins used <a href="https://daneden.github.io/animate.css/">Animate.css</a>, <a href="http://mynameismatthieu.com/WOW/">WOW.js</a>
     and <a href="https://jqueryvalidation.org/">jQuery Validation Plugin</a>
     </p>
   </div>
 </footer><!-- /footer -->
   </section><!-- /site-container -->

material-design-form-inputs-with-phone-validation.markdown

Material Design Form Inputs (with Phone validation)

Material Design Form Inputs With Validation Errors

Forked from Mithicher's Pen Material Design Form Inputs.

A Pen by Eric Rasch on CodePen.

License.

script.js

wow = new WOW();
wow.init();

$(document).ready(function() {
	 
	 		/**
	 		 * check if the input has any value (if we've typed into it)
	 		 */
	 		$('.form__input').blur(function() {

				if ($(this).val()) {
					$(this).closest( '.form__wrapper' ).addClass('form--filled');
				} else {
					$(this).closest( '.form__wrapper' ).removeClass('form--filled');
				}	
			});

	 		/**
	 		 * Form validation
	 		 */
			$('.form').validate({
				rules : {
          phone: {
            required: true,
            phoneUS: true
          },
					password: {
						minlength: 5
					}
				}
			}); 

			/**
			 * Form2 validation
			 */
			$('.form2').validate();


			/**
			 * Simple Modal
			 */
			$('.modal__toggle').on('click', function (e) {
	  			e.preventDefault();
				$('.modal').toggleClass('modal--open');
			});	
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.0.3/wow.min.js"></script>
<script src="//jqueryvalidation.org/files/dist/additional-methods.min.js"></script>

style.scss

@import "compass/css3";

$body__font-family: 'Roboto', sans-serif;

/* Basic Reset */
*,
*:after,
*:before {
	margin: 0;
	padding: 0;

	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

body {
	font-size: 1.8em;
	line-height: 1.875;
	font-family: $body__font-family;
	font-weight: 400;
	color: #555;

	background-color: #eeeeee;
}

/* Basics Styles */
a {
	text-decoration: none;
	color: #2196f3;
}

h1,h2,h3 {
	margin-bottom: 1.2rem;
	line-height: 1.5;
}

h1 { font-size: 4.8rem; }
h2 { font-size: 3.2rem; }
h4 { 
	font-size: 1.8rem; 
	font-weight: 300;
}

.lead {
	font-size: 1.8rem;
}
p {
	margin-bottom: 1.5rem;
}

.text-small { font-size: 75%; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.text-center { text-align: center; }

.left { float: left; }
.right { float: right; }

.display__inline { display: inline; }

/* Padding Helpers */
.padding-tb {
	padding-top: 3%;
	padding-bottom: 3%;
}

/* Basic Demo Styles */
.site-container {
	max-width: 320px;
	margin: 10px auto;
	padding-left: 0.6em;
	padding-right: 0.6em;

	@media screen and (min-width: 60.063em) {
		max-width: 400px;
	}
}
.footer__content {
	margin-top: 1.6rem;
}


/* Card */
.card {
	position: relative;
	overflow: hidden;
	background-color: white;
	box-shadow: 
		0 1px 3px 0 rgba(0, 0, 0, 0.24), 
		0 1px 2px 0 rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	
	padding: 1em;

	h3 {
		font-weight: bold;
	}
}

/* Material Design Form Inputs */
.form {}

.form__wrapper {
	overflow: hidden;
	position: relative;
	z-index: 1;
	display: inline-block;
	margin-bottom: 1.6rem;
	width: 100%;
	vertical-align: top;
}

.form__wrapper--submit {
	padding: 1.6rem 0;
}

.form__input {
	display: block;
	position: relative;
	margin-top: 1em;
	padding: 0.84em 0;
	width: 100%;
	box-sizing: border-box;
	color: #444;
	font-size: 1.6rem;
	outline: 0;
	//background: transparent;
	border: none;

	border-bottom: solid 1px #ddd;
	-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	   -moz-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	     -o-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
			transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #2196f3 4%);
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #2196f3 4%);
	background-position: -400px 0;
	background-size: 400px 100%;
	background-repeat: no-repeat;
	
	/**
	 * Remove default box-shadow for required pseudo classes 
	 */
	&:required {
		box-shadow: none;
	}
	
	/**
	 *  When input contain a class of .error 
	 */
	&.error {
		-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	   	   -moz-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	         -o-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
				transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);

		background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #f44336 4%);
		background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #f44336 4%);
		background-position: 0 0;
		background-size: 400px 100%;
		background-repeat: no-repeat;
	}

	&:focus {
		background-position: 0 0;
		color: #444;

		-webkit-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	   	   -moz-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	     	 -o-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
				transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	} 
}

/* Form Label */
.form__label {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0;
	width: 100%;
	height: calc(100% - 1em);
	text-align: left;
	pointer-events: none;
	color: #999;
}

/* Form Label Content */
.form__label-content {
	position: absolute;

	-webkit-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	   -moz-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
	     -o-transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
			transition: transform 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
}

/**
 * 1. When input is focused move the label to top
 * 2. when the input field has a value move the label to top
 */
.form__input:focus ~ .form__label .form__label-content,
.form--filled .form__label-content {
	font-size: 1.4rem;
	-webkit-transform: translate3d(0, -65%, 0);
	   -moz-transform: translate3d(0, -65%, 0);
			transform: translate3d(0, -65%, 0);
}

/**
 * Error Styles
 * .error class generated by jquery.validate.min.js plugin
 */
.error {
	font-size: 1.4rem;
	color: #f44336;
	display: block;
}

/* Basic Buttons */
.btn {
	display: inline-block;
	padding: 0.6em 1.5em;
	border-radius: 2px;
	background-color: #2196f3;
	color: #fff;
	border: 0;
	outline: none;
	cursor: pointer;

	font-family: inherit;
	font-weight: 400;
	font-size: 1.6rem;

	box-shadow: 
		0 1px 3px 0 rgba(0, 0, 0, 0.24), 
		0 1px 2px 0 rgba(0, 0, 0, 0.12);

	transition: all 0.2s ease;

	&:focus,
	&:hover {
		background-color: darken(#2196f3, 5%);
	}

	&.btn-block {
		width: 100%;
		display: block;
	}
}


/* Modal Styles */
.modal {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fff;
	padding: 1em;
	z-index: 999;

	border-radius: 2px;
	//display: none;
	//opacity: 0;
	
	-webkit-transform: translate3d(0, 100%, 0);
	   -moz-transform: translate3d(0, 100%, 0);
			transform: translate3d(0, 100%, 0);

	-webkit-transition: transform 0.3s cubic-bezier(0.000, 0.795, 0.000, 1.000);
	   -moz-transition: transform 0.3s cubic-bezier(0.000, 0.795, 0.000, 1.000);
	    -ms-transition: transform 0.3s cubic-bezier(0.000, 0.795, 0.000, 1.000);
	     -o-transition: transform 0.3s cubic-bezier(0.000, 0.795, 0.000, 1.000);
	 		transition: transform 0.3s cubic-bezier(0.000, 0.795, 0.000, 1.000);
}

/* Close icon style for model */
.modal--close {
	display: block;
	float: right;
	cursor: pointer;

	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 1.6em;
	color: #888;
}

.modal--open {
	//display: block;
	//opacity: 1.0;
	-webkit-transform: translate3d(0, 0, 0);
	   -moz-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
}