Skip to content

Instantly share code, notes, and snippets.

@jklue

jklue/2-step form with authentication.markdown

Last active June 21, 2016 15:59
Show Gist options
  • Save jklue/7e8dbd1fed5bbcba64982967dbe27481 to your computer and use it in GitHub Desktop.
Save jklue/7e8dbd1fed5bbcba64982967dbe27481 to your computer and use it in GitHub Desktop.
Download ZIP
2-step form with authentication
Raw
index.html
<form method="post" action="http://requestb.in/1i34uqh1">
<div id="stage1">
<select name="Degree" id="Degree" class="gray-grad" onchange="change_selection(this);" size="1">
<option selected="selected" value="">Degree Level Desired*</option>
<option value="6">Master&#39;s</option>
<option value="2">Bachelor&#39;s</option>
<option value="3">Associate</option>
<option value="5">Certificates</option>
</select>
<div id="programs">
<?php //this is required to make legacy script from ION work. The script populated the Area dropdown based on the selection in the Degrees dropdown. ?>
<select name="Program" id="Program" class="gray-grad" size="1">
<option selected="selected" value="">Select Area of Interest*</option>
<option value="MSAC"><i>Please select Degree Level first.</i></option>
</select>
</div>
<a href="#" id="go-to-stage2">Next »</a>
</div>
<div id="stage2" class="hidden">
<input placeholder="First Name*" id="FirstName" name="FirstName" type="text" required onblur="realtimeNameValidation(name)" />
<input placeholder="Last Name*" id="LastName" name="LastName" type="text" required onblur="realtimeNameValidation(name)" />
<!-- <input placeholder="Street Address*" id="Address" name="Address" type="text" required /> -->
<input placeholder="ZIP Code* (5 digits)" id="Zipcode" name="Zipcode" type="text" required onblur="realtimeZIPValidation(name)" />
<input placeholder="Daytime Phone* (10 digits)" id="Phone" name="Phone" type="tel" required onblur="realtimePhoneValidation(name)" />
<input placeholder="Email Address*" id="Email" name="Email" type="email" required onblur="realtimeEmailValidation(name)" />
<button id="rfi-submit" type="submit" class=" gray-grad" data-tag="Submit">
<div id="getStarted">CONSENT & SUBMIT</div>
<div id="guillemet">&#0187;</div>
</button>
</div>
</form>
Raw
script.js
// add function exists to jQuery prototype
jQuery.fn.exists = function() {
return this.length > 0;
}
/*******************
* Form stage control
********************/
// cache jquery variables
var $stage1 = $('#stage1');
var $stage2 = $('#stage2');
$('#go-to-stage2').on('click', function(e) {
e.preventDefault(); // don't do anything special
// Degree
var $degree = $('form select[name="Degree"]');
console.log('$degree: ', +$degree);
var degreeVal = $degree.find('option:selected').val();
console.log('degreeVal: ', +degreeVal);
if ($degree.exists() && (degreeVal == '0' || !(degreeVal))) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Please select a degree.</span>';
alertHTML += '</div>';
$degree.after(alertHTML);
$degree.focus().addClass("error");
return false;
} else {
}
// Program Area
var $program = $('form #programs'); // can't select by name b/c name changes on degree change
console.log('$program: ', $program);
// var programVal = $program.find('option:selected').text();
var programVal = $program.find('select option:selected').val();
console.log('programVal: ', programVal);
if ($program.exists() && (programVal == '0' || !(programVal))) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Please select a program.</span>';
alertHTML += '</div>';
$program.after(alertHTML);
$program.focus().addClass("error");
return false;
}
// if everything passes, hide stage 1, show stage 2
$stage1.addClass('hidden');
$stage2.removeClass('hidden');
});
/*************************
* Realtime Validation
**************************/
// Validate Name
function realtimeNameValidation(x) {
console.log(document.getElementById(x).value);
var re = /[A-Za-z0-9 -']$/;
// Check input
if (re.test(document.getElementById(x).value)) {
console.log('test passed');
// Style green
document.getElementById(x).style.border = '2px solid #CCC';
return true;
} else {
// Style red
document.getElementById(x).style.border = 'solid 2px #B94A48';
}
}
// Validate ZIP
function realtimeZIPValidation(x) {
// Validation rule
var re = /^\d{5}$/;
// Check input
if (re.test(document.getElementById(x).value)) {
// Style green
document.getElementById(x).style.border = '2px solid #CCC';
return true;
} else {
// Style red
document.getElementById(x).style.border = 'solid 2px #B94A48';
}
}
// Validate Phone
function realtimePhoneValidation(x) {
// Validation rule
var re = /^\d{10}$/;
// Check input
if (re.test(document.getElementById(x).value)) {
// Style green
document.getElementById(x).style.border = '2px solid #CCC';
return true;
} else {
// Style red
document.getElementById(x).style.border = 'solid 2px #B94A48';
}
}
// Validate email
function realtimeEmailValidation(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (re.test(email)) {
document.getElementById('email').style.border = '2px solid #CCC';
return true;
} else {
document.getElementById('email').style.border = 'solid 2px #B94A48';
return false;
}
}
/***********
* Dynamic Inputs
************/
function change_selection(e) {
var str_degree = e.value;
var str_programs = document.getElementById("programs");
var prog_sel = "area";
switch (str_degree) {
// Master's
case "6":
str_programs.innerHTML =
"<select class='gray-grad' id='" + prog_sel + "' name='" + prog_sel + "' required>\n\
<option selected='selected' value=''>Select Area of Interest*</option>\n\
<option value='MSAC'>Accounting & Finance</option>\n\
<option value='MBA'>Business Administration</option>\n\
<option value='MED'>Education & Training</option>\n\
<option value='MHSA'>Health Services Administration</option>\n\
<option value='MSHR'>Human Resources Management</option>\n\
<option value='MSIA'>Information Security</option>\n\
<option value='MSIS'>Information Systems & Technology</option>\n\
<option value='JWEMBA'>Jack Welch Executive MBA</option>\n\
<option value='MSMG'>Management</option>\n\
<option value='MPA'>Public Administration</option>\n\
</select>";
break;
// Bachelor's
case "2":
str_programs.innerHTML =
"<select class='gray-grad' id='" + prog_sel + "' name='" + prog_sel + "' required>\n\
<option selected='selected' value=''>Select Area of Interest*</option>\n\
<option value='BBA-AC'>Accounting & Finance</option>\n\
<option value='BBA'>Business Administration</option>\n\
<option value='BSCJ'>Criminal Justice</option>\n\
<option value='BSIS'>Information Systems & Technology</option>\n\
<option value='BSN'>Nursing-RN to BSN</option>\n\
</select>";
break;
// Associate
case "3":
str_programs.innerHTML =
"<select class='gray-grad' id='" + prog_sel + "' name='" + prog_sel + "' required>\n\
<option selected='selected' value=''>Select Area of Interest*</option>\n\
<option value='AAAC'>Accounting & Finance</option>\n\
<option value='AACM'>Acquisition &amp; Contract Management</option>\n\
<option value='AABA'>Business Administration</option>\n\
<option value='AAIS'>Information Systems & Technology</option>\n\
<option value='AAMK'>Marketing</option>\n\
</select>";
break;
// Certificate
case "5":
str_programs.innerHTML =
"<select class='gray-grad' id='" + prog_sel + "' name='" + prog_sel + "' required>\n\
<option selected='selected' value=''>Select Area of Interest*</option>\n\
<option value='DPCM'>Diploma Acquisition & Contract Mgt</option>\n\
<option value='JWCRT-BL'>Jack Welch Executive Certificate</option>\n\
</select>";
break;
default:
str_programs.innerHTML =
"<select class='gray-grad' id='" + prog_sel + "' name='" + prog_sel + "' required>\n\
<option selected='selected' value=''>Select Area of Interest*</option>\n\
</select>";
}
}
/***********
* Placeholders and Validation
************/
jQuery(document).ready(function($) {
/* polyfill for input placeholder */
if (!Modernizr.input.placeholder) {
// if(Modernizr.input.placeholder){
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
}
$('#rfi-submit').click(function() {
/* RFI Validation */
$("form .control-group").removeClass("error");
// First Name
var fNameVal = $('form input[name="first_name"]').val();
if ($('form input[name="first_name"]').exists() && (fNameVal == 'First Name' || fNameVal == '')) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Please enter your first name.</span>';
alertHTML += '</div>';
$('form input[name="first_name"]').after(alertHTML);
$('form input[name="first_name"]').focus().parent().parent().addClass("error");
return false;
}
// Last Name
var lNameVal = $('form input[name="last_name"]').val();
if ($('form input[name="last_name"]').exists() && (lNameVal == 'Last Name' || !(lNameVal))) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Please enter your last name.</span>';
alertHTML += '</div>';
$('form input[name="last_name"]').after(alertHTML);
$('form input[name="last_name"]').focus().parent().parent().addClass("error");
return false;
}
// Street Address
var addressVal = $('form input[name="street_address"]').val();
if ($('form input[name="street_address"]').exists() && (addressVal == 'Street Address' || !(addressVal))) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Please enter your street address.</span>';
alertHTML += '</div>';
$('form input[name="street_address"]').after(alertHTML);
$('form input[name="street_address"]').focus().parent().parent().addClass("error");
return false;
}
// ZIP
// check to see if only numbers and more than 5 digits
var zipVal = $('form input[name="zip_code"]').val();
var zipValNaN = isNaN(zipVal);
if (zipValNaN == true) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Please enter a 5-digit ZIP Code.</span>';
alertHTML += '</div>';
$('form input[name="zip_code"]').after(alertHTML);
$('form input[name="zip_code"]').focus().parent().parent().addClass("error");
return false;
}
if ($('form input[name="zip_code"]').exists() && (zipVal == 'Daytime Phone' || zipVal.toString().length < 5)) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Too short! Please enter a 5-digit ZIP Code.</span>';
alertHTML += '</div>';
$('form input[name="zip_code"]').after(alertHTML);
$('form input[name="zip_code"]').focus().parent().parent().addClass("error");
return false;
}
if ($('form input[name="zip_code"]').exists() && (zipVal == 'Daytime Phone' || zipVal.toString().length > 5)) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Too long! Please enter a 5-digit ZIP Code.</span>';
alertHTML += '</div>';
$('form input[name="zip_code"]').after(alertHTML);
$('form input[name="zip_code"]').focus().parent().parent().addClass("error");
return false;
}
// Phone
// griffin Ticket 1336: check to see if only numbers and more than 10 digitals.
var phoneVal = $('form input[name="phone"]').val();
var phoneValNaN = isNaN(phoneVal);
if (phoneValNaN == true) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Please enter a 10-digit phone number.</span>';
alertHTML += '</div>';
$('form input[name="phone"]').after(alertHTML);
$('form input[name="phone"]').focus().parent().parent().addClass("error");
return false;
}
if ($('form input[name="phone"]').exists() && (phoneVal == 'Daytime Phone' || phoneVal.toString().length < 10)) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Too short! Please enter a 10-digit phone number.</span>';
alertHTML += '</div>';
$('form input[name="phone"]').after(alertHTML);
$('form input[name="phone"]').focus().parent().parent().addClass("error");
return false;
}
// jfrost: check for greater than 10 digits
if ($('form input[name="phone"]').exists() && (phoneVal == 'Daytime Phone' || phoneVal.toString().length > 10)) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Too long! Please enter a 10-digit phone number.</span>';
alertHTML += '</div>';
$('form input[name="phone"]').after(alertHTML);
$('form input[name="phone"]').focus().parent().parent().addClass("error");
return false;
}
// Email
var emailVal = $('form input[name="email"]').val();
var atpos = emailVal.indexOf("@");
var dotpos = emailVal.lastIndexOf(".");
if ($('form input[name="email"]').exists() && (emailVal == 'Email' ||
(!emailVal || (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= emailVal.length)))) {
$(".alert").alert().remove();
var alertHTML = '<div class="alert alert-error fade in">';
alertHTML += '<button type="button" class="close" data-dismiss="alert">&times;</button>';
alertHTML += '<span>Please enter a valid email address.</span>';
alertHTML += '</div>';
$('form input[name="email"]').after(alertHTML);
$('form input[name="email"]').focus().parent().parent().addClass("error");
return false;
}
});
});
Raw
scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Raw
style.css
/* General */
form {
width: 300px;
margin: 0 auto;
}
input,
select,
button {
margin: 10px 0;
width: 100%;
}
/* Functional */
.hidden {
display: none;
}
.error {
/*background-color: red;*/
border: 2px solid red;
}
.alert button {
background-color: gray !important;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment