Skip to content

Instantly share code, notes, and snippets.

@pixbit

pixbit/index.html

Created July 27, 2012 01:36
Show Gist options
  • Save pixbit/3185678 to your computer and use it in GitHub Desktop.
Save pixbit/3185678 to your computer and use it in GitHub Desktop.
Download ZIP
Form
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodePen &middot; A Pen by stefanvermaas</title>
<!--
Copyright (c) 2012 Stefan Vermaas, http://codepen.io/stefanvermaas
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-->
<style>
/*=Form
*************************************************************************/
form {
display: block;
float: left;
width: 100%;
}
form .fieldset {
float: left;
width: 100%;
}
form fieldset { border: 0; }
form .fieldset { display: none; }
form div.active { display: block; }
form legend { font: 1em arialBlack; color: #d82b39; }
form input[type="text"],
form input[type="tel"],
form input[type="date"],
form input[type="email"],
form select {
display: block;
width: 100%;
height: 32px;
margin: 0px 0px 12px;
padding: 6px;
border: 1px solid rgb(204, 204, 204);
border-radius: 2px 2px 2px 2px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
font-size: 0.875em; /* 14 : 16 */
color: #000;
color: rgba(0, 0, 0, 0.75);
}
form textarea {
display:block;
width:100%;
height: 100px;
padding:6px;
margin:0 0 12px 0;
border:1px solid #ccc;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
color:rgba(0,0,0,0.75);
font-size: 0.875em; /* 14 : 16 */
}
form label {
display: block;
margin: 10px 0 2px 0;
color: rgb(77, 77, 77);
cursor: pointer;
font-weight: bold;
}
form p {
display: block;
float: left;
width: 100%;
font-size: 1em;
}
form ul {
display: block;
float: left;
width: 100%;
padding: 0;
margin: 0 0 10px 0;
list-style: none;
}
form ul li {
display: block;
float: left;
width: 100%;
}
.disabled { display: none; }
p.step-row { padding-top: 25px; }
/* Form notifications */
#error-msg {
float: left;
width: 100%;
}
.notification {
float: left;
width: 100%;
margin: 15px 0;
padding: 10px 5px;
/* border */
border: 1px solid rgb(251, 238, 213);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
}
p.notification { display: block; }
.info {
background-color: rgb(217, 237, 247);
border-color: rgb(188, 232, 241);
color: rgb(58, 135, 173);
}
.watch {
background-color: rgb(252, 248, 227);
color: rgb(192, 152, 83);
border: 1px solid rgb(251, 238, 213);
}
.error {
background-color: rgb(242, 222, 222);
color: rgb(185, 74, 72);
border: 1px solid rgb(238, 211, 215);
}
.success {
background-color: rgb(223, 240, 216);
border-color: rgb(214, 233, 198);
color: rgb(70, 136, 71);
}
/*=Buttons
*************************************************************************/
.btn {
display: block;
padding: 7px 20px;
margin: 0px 10px;
background: 0;
cursor: pointer;
-webkit-box-shadow: 0px 1px 1px rgba(250, 250, 250, 0.25) inset,
0px 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 1px rgba(250, 250, 250, 0.25) inset,
0px 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 1px rgba(250, 250, 250, 0.25) inset,
0px 1px 2px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font: 0.75em Trebuchet MS;
color: #fff;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}
a.btn { text-decoration: none; }
.btn-left { float: left; margin: 0; }
.btn-right { float: right; margin: 0; }
/* Button colors */
.btn-red {
background-color: #d82b39;
border: 1px solid #bb2834;
}
.btn-yellow {
background-color: #fec029;
border: 1px solid #dda724;
}
.btn-green {
background-color: #afd365;
border: 1px solid #8dac4e;
}
.btn-blue {
background-color: #91afdc;
border: 1px solid #738cb1;
}
/* Disabled button */
.btn .disabled {
background-color: #FF6E6E;
}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: normal !important;
word-spacing: 0 !important;
-webkit-transform: none !important;
-moz-transform: none !important;
-ms-transform: none !important;
-o-transform: none !important;
transform: none !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
text-shadow: none !important;
border: 0 !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
// window.alert = function(){}; we're going to allow alerts for now
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
</head>
<body>
<form id="inschrijving" method="post" action="#">
<div class="error_msg"></div><!-- .error_msg -->
<fieldset>
<label for="firstname">Firstname:</label>
<input type="text" name="firstname" class="required" maxlength="15" />
<br />
<label for="zipcode">Zipcode:</label>
<input type="text" name="zipcode" class="required" data-validate="zipcode" maxlength="6" />
</fieldset><!-- .step1 -->
<fieldset>
<label for="test">Test:</label>
<input type="text" name="test" class="required" />
</fieldset><!-- .step2 -->
</form><!-- #inschrijving -->
<div id="nav"></div><!-- #nav -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
(function() {
$(function (){
// Define some variables
var i,
that = $(this),
formID = '#inschrijving',
formField = $(formID + ' fieldset'),
amountForms = formField.size(),
submitID = 'verzenden',
error;
/*=Rebuild the form
********************************************/
formField.each(function( i ) {
// Define the step
var nr = parseInt(i);
// Wrap all fieldsets
$(this).wrap('<div id="step' + i + '" class="fieldset"></div>');
// Make the first step visible
if( i === 0 ) {
$('#step' + i).addClass('active');
// Build the first navigation button
$('#nav').append('<a href="#step' + (i + 1) + '" id="next" title="Ga naar de volgende stap" class="btn btn-red btn-right">Volgende stap</a>');
}
});
/*=Validate the steps
********************************************/
// Define the current step
var curr = $('.active'),
currNr = curr.index(),
currStep = '#step' + currNr;
// Loop constantly through the required classes
$(currStep + ' .required').each( function() {
// Check on keyup
$(this).keyup( function() {
// Check for input
error = ( $(this).val() === "" || $(this).length === 0 ) ? $(this).addClass('error') : $(this).removeClass('error');
// Check for additional checks
if( typeof $(this).attr('data-validate') !== "undefined" ) {
// Define the addition
var addition = $(this).attr('data-validate');
// Check the additional validations
if( addition == 'zipcode' ) {
// Check the zipcode
var zipcode_check = /^([0-9]{4})([a-zA-Z]{2})$/i;
error = ( !zipcode_check.test($(this).val()) ) ? $(this).addClass('error') : $(this).removeClass('error');
}
} // end additional checks
}); // end checking on keyup
}); // end of each function
/*=Navigate through the pages
********************************************/
$('.btn').live('click', function() {
// Set the error check
var checkError = true;
// Check each required field
$(currStep + ' .required').each( function() {
if( $(this).val() === "" || $(this).length === 0 ) {
// Add the error class
$(this).addClass('error');
// Set the checkError to false, because there's an error
checkError = false;
} else {
$(this).removeClass('error')
}
});
// Check for errors
if( checkError === true ) {
// No errors, go to next page
} else {
// There're errors, tell the user about them.
$('.error_msg').html('<p class="notification error">Hmm nog niet alles is helemaal goed ingevuld. Zou je dit nog even willen doen?</p>')
}
});
});
})();
</script>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/stefanvermaas/pen/scAGD" target="_blank">Edit this Pen</a>
</div>
</body>
</html>
Raw
index.js
$(function (){
// Define some variables
var i,
that = $(this),
formID = '#inschrijving',
formField = $(formID + ' fieldset'),
amountForms = formField.size(),
submitID = 'verzenden',
error;
/*=Rebuild the form
********************************************/
formField.each(function( i ) {
// Define the step
var nr = parseInt(i);
// Wrap all fieldsets
$(this).wrap('<div id="step' + i + '" class="fieldset"></div>');
// Make the first step visible
if( i === 0 ) {
$('#step' + i).addClass('active');
// Build the first navigation button
$('#nav').append('<a href="#step' + (i + 1) + '" id="next" title="Ga naar de volgende stap" class="btn btn-red btn-right">Volgende stap</a>');
}
});
/*=Validate the steps
********************************************/
// Define the current step
var curr = $('.active'),
currNr = curr.index(),
currStep = '#step' + currNr;
// Loop constantly through the required classes
$(currStep + ' .required').each( function() {
// Check on keyup
$(this).keyup( function() {
// Check for input
error = ( $(this).val() === "" || $(this).length === 0 ) ? $(this).addClass('error') : $(this).removeClass('error');
// Check for additional checks
if( typeof $(this).attr('data-validate') !== "undefined" ) {
// Define the addition
var addition = $(this).attr('data-validate');
// Check the additional validations
if( addition == 'zipcode' ) {
// Check the zipcode
var zipcode_check = /^([0-9]{4})([a-zA-Z]{2})$/i;
error = ( !zipcode_check.test($(this).val()) ) ? $(this).addClass('error') : $(this).removeClass('error');
}
} // end additional checks
}); // end checking on keyup
}); // end of each function
/*=Navigate through the pages
********************************************/
$('.btn').live('click', function() {
// Set the error check
var checkError = true;
// Check each required field
$(currStep + ' .required').each( function() {
if( $(this).val() === "" || $(this).length === 0 ) {
// Add the error class
$(this).addClass('error');
// Set the checkError to false, because there's an error
checkError = false;
} else {
$(this).removeClass('error')
}
});
// Check for errors
if( checkError === true ) {
// No errors, go to next page
} else {
// There're errors, tell the user about them.
$('.error_msg').html('<p class="notification error">Hmm nog niet alles is helemaal goed ingevuld. Zou je dit nog even willen doen?</p>')
}
});
});
Raw
markup.html
<form id="inschrijving" method="post" action="#">
<div class="error_msg"></div><!-- .error_msg -->
<fieldset>
<label for="firstname">Firstname:</label>
<input type="text" name="firstname" class="required" maxlength="15" />
<br />
<label for="zipcode">Zipcode:</label>
<input type="text" name="zipcode" class="required" data-validate="zipcode" maxlength="6" />
</fieldset><!-- .step1 -->
<fieldset>
<label for="test">Test:</label>
<input type="text" name="test" class="required" />
</fieldset><!-- .step2 -->
</form><!-- #inschrijving -->
<div id="nav"></div><!-- #nav -->
Raw
style.css
/*=Form
*************************************************************************/
form {
display: block;
float: left;
width: 100%;
}
form .fieldset {
float: left;
width: 100%;
}
form fieldset { border: 0; }
form .fieldset { display: none; }
form div.active { display: block; }
form legend { font: 1em arialBlack; color: #d82b39; }
form input[type="text"],
form input[type="tel"],
form input[type="date"],
form input[type="email"],
form select {
display: block;
width: 100%;
height: 32px;
margin: 0px 0px 12px;
padding: 6px;
border: 1px solid rgb(204, 204, 204);
border-radius: 2px 2px 2px 2px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1) inset;
font-size: 0.875em; /* 14 : 16 */
color: #000;
color: rgba(0, 0, 0, 0.75);
}
form textarea {
display:block;
width:100%;
height: 100px;
padding:6px;
margin:0 0 12px 0;
border:1px solid #ccc;
-webkit-border-radius:2px;
-moz-border-radius:2px;
-ms-border-radius:2px;
border-radius:2px;
-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);
color:rgba(0,0,0,0.75);
font-size: 0.875em; /* 14 : 16 */
}
form label {
display: block;
margin: 10px 0 2px 0;
color: rgb(77, 77, 77);
cursor: pointer;
font-weight: bold;
}
form p {
display: block;
float: left;
width: 100%;
font-size: 1em;
}
form ul {
display: block;
float: left;
width: 100%;
padding: 0;
margin: 0 0 10px 0;
list-style: none;
}
form ul li {
display: block;
float: left;
width: 100%;
}
.disabled { display: none; }
p.step-row { padding-top: 25px; }
/* Form notifications */
#error-msg {
float: left;
width: 100%;
}
.notification {
float: left;
width: 100%;
margin: 15px 0;
padding: 10px 5px;
/* border */
border: 1px solid rgb(251, 238, 213);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-shadow: 0px 1px 0px rgb(255, 255, 255);
}
p.notification { display: block; }
.info {
background-color: rgb(217, 237, 247);
border-color: rgb(188, 232, 241);
color: rgb(58, 135, 173);
}
.watch {
background-color: rgb(252, 248, 227);
color: rgb(192, 152, 83);
border: 1px solid rgb(251, 238, 213);
}
.error {
background-color: rgb(242, 222, 222);
color: rgb(185, 74, 72);
border: 1px solid rgb(238, 211, 215);
}
.success {
background-color: rgb(223, 240, 216);
border-color: rgb(214, 233, 198);
color: rgb(70, 136, 71);
}
/*=Buttons
*************************************************************************/
.btn {
display: block;
padding: 7px 20px;
margin: 0px 10px;
background: 0;
cursor: pointer;
-webkit-box-shadow: 0px 1px 1px rgba(250, 250, 250, 0.25) inset,
0px 1px 2px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 1px 1px rgba(250, 250, 250, 0.25) inset,
0px 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0px 1px 1px rgba(250, 250, 250, 0.25) inset,
0px 1px 2px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font: 0.75em Trebuchet MS;
color: #fff;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
}
a.btn { text-decoration: none; }
.btn-left { float: left; margin: 0; }
.btn-right { float: right; margin: 0; }
/* Button colors */
.btn-red {
background-color: #d82b39;
border: 1px solid #bb2834;
}
.btn-yellow {
background-color: #fec029;
border: 1px solid #dda724;
}
.btn-green {
background-color: #afd365;
border: 1px solid #8dac4e;
}
.btn-blue {
background-color: #91afdc;
border: 1px solid #738cb1;
}
/* Disabled button */
.btn .disabled {
background-color: #FF6E6E;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment