2-step form with authentication

2-step form with authentication.markdown

2-step form with authentication

A Pen by Luke Hatfield on CodePen.

License.

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>

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;
    }

  });

});

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>

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;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />