Material Design Form Inputs With Validation Errors
Forked from Mithicher's Pen Material Design Form Inputs.
A Pen by Eric Rasch on CodePen.
<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">×</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 Validation Errors
Forked from Mithicher's Pen Material Design Form Inputs.
A Pen by Eric Rasch on CodePen.
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'); | |
}); | |
}); |
<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> |
@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); | |
} |