Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Register for Full Stack Conf</title>
  <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,700" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body>
	<div class="container">

    <header>
      <span>Register for</span>
      <h1>Full Stack Conf</h1>
    </header>

    <form action="index.html" method="post">

      <fieldset>
        <legend>Basic Info</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

        <label for="mail">Email:</label>
        <input type="email" id="mail" name="user_email">

        <label for="title">Job Role</label>
        <select id="title" name="user_title">
          <option value="full-stack js developer">Full Stack JavaScript Developer</option>
          <option value="front-end developer">Front End Developer</option>
          <option value="back-end developer">Back End Developer</option>
          <option value="designer">Designer</option>
          <option value="student">Student</option>
          <option value="other">Other</option>
        </select>

        <div class="other">
          <label for="other-title">Your Job Role:</label>
          <input type="text" id="other-title" name="user_otherTitle"><br>
        </div>

      </fieldset>

      <fieldset class="shirt">
        <legend>T-Shirt Info</legend>

        <div>
          <label for="size">Size:</label>
          <select id="size" name="user_size">
            <option value="small">S</option>
            <option value="medium" selected>M</option>
            <option value="large">L</option>
            <option value="extra large">XL</option>
          </select>
        </div>

        <div>
          <label for="design">Design:</label>
          <select id="design" name="user_design">
            <option>Select Theme</option>
            <option value="js puns">Theme - JS Puns</option>
            <option value="heart js">Theme - I &#9829; JS</option>
          </select>
        </div>

        <div id="colors-js-puns" class="">
          <label for="color">Color:</label>
          <select id="color">
            <option value="cornflowerblue">Cornflower Blue (JS Puns shirt only)</option>
            <option value="darkslategrey">Dark Slate Grey (JS Puns shirt only)</option>
            <option value="gold">Gold (JS Puns shirt only)</option>
            <option value="tomato">Tomato (I &#9829; JS shirt only)</option>
            <option value="steelblue">Steel Blue (I &#9829; JS shirt only)</option>
            <option value="dimgrey">Dim Grey (I &#9829; JS shirt only)</option>
          </select>
        </div>
      </fieldset>

      <fieldset class="activities">
        <legend>Register for Activities</legend>
        <label><input type="checkbox" name="all"> Main Conference — $200</label>
        <label><input type="checkbox" name="js-frameworks"> JavaScript Frameworks Workshop — Tuesday 9am-12pm, $100</label>
        <label><input type="checkbox" name="js-libs"> JavaScript Libraries Workshop — Tuesday 1pm-4pm, $100</label>
        <label><input type="checkbox" name="express"> Express Workshop — Tuesday 9am-12pm, $100</label>
        <label><input type="checkbox" name="node"> Node.js Workshop — Tuesday 1pm-4pm, $100</label>
        <label><input type="checkbox" name="build-tools"> Build tools Workshop — Wednesday 9am-12pm, $100</label>
        <label><input type="checkbox" name="npm"> npm Workshop — Wednesday 1pm-4pm, $100</label>

      </fieldset>
      <fieldset>
        <legend>Payment Info</legend>

        <label for="payment">I'm going to pay with:</label>
        <select id="payment" name="user_payment">
          <option value="select_method">Select Payment Method</option>
          <option value="credit card">Credit Card</option>
          <option value="paypal">PayPal</option>
          <option value="bitcoin">Bitcoin</option>
        </select>

        <div id="credit-card" class="credit-card">
          <div class="col-6 col">
            <label for="cc-num">Card Number:</label>
        	  <input id="cc-num" name="user_cc-num" type="text" class="ccnum">
          </div>

          <div class="col-3 col">
            <label for="zip">Zip Code:</label>
            <input id="zip" name="user_zip" type="text">
          </div>

          <div class="col-3 col">
            <label for="cvv">CVV:</label>
            <input id="cvv" name="user_cvv" type="text">
          </div>
          
          <label for="exp-month">Expiration Date:</label>
          <select id="exp-month" name="user_exp-month">
            <option value="1">1 - January</option>
            <option value="2">2 - February</option>
            <option value="3">3 - March</option>
            <option value="4">4 - April</option>
            <option value="5">5 - May</option>
            <option value="6">6 - June</option>
            <option value="7">7 - July</option>
            <option value="8">8 - August</option>
            <option value="9">9 - September</option>
            <option value="10">10 - October</option>
            <option value="11">11 - November</option>
            <option value="12">12 - December</option>
          </select>
          <label for="exp-year">Expiration Year:</label>
          <select id="exp-year" name="user_exp-year">
            <option value="2016">2016</option>
            <option value="2017">2017</option>
            <option value="2018">2018</option>
            <option value="2019">2019</option>
            <option value="2020">2020</option>
          </select>
        </div>

        <div>
        	<p>If you selected the PayPal option we'll take you to Paypal's site to set up your billing information, when you click “Register” below.</p>
        </div>

        <div>
        	<p>If you selected the Bitcoin option we'll take you to the Coinbase site to set up your billing information. Due to the nature of exchanging Bitcoin, all Bitcoin transactions will be final.</p>
        </div>

      </fieldset>

      <button type="submit">Register</button>

    </form>

	</div>
  <script
			  src="https://code.jquery.com/jquery-3.3.1.min.js"
			  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
			  crossorigin="anonymous"></script>
  <script src="js/script.js"></script>
</body>
</html>

              
            
!

CSS

              
                /* =================================
  Base Element Styles
==================================== */

* {
  box-sizing: border-box;
}

body,
input,
button {
  font-family: 'Ubuntu', sans-serif;
}

body {
  font: 1em/1.5;
  color: #666;
	background: #404552;
}

header {
	text-align: center;
}

header span {
  color: lightgray;
  font-weight: 500;
  font-size: 1.2em;
  text-shadow: 1.5px 2px 6px rgba(0, 0, 0, 0.5);
}

h1 {
	font-size: 2.5em;
	text-shadow: 1.5px 2px 6px rgba(0, 0, 0, 0.5);
	margin: 0;
  color: lightgray;
  font-weight: bold;

}

a {
  text-decoration: none;
}

/* =================================
  Form Element Styles
==================================== */

form {
	padding: .875em 1.875em 1.875em;
	background: #38383d;
  border-radius: .75em;
}

fieldset,
legend,
button {
	padding: 0;
	border: none;
}

fieldset {
	margin-top: 1.6em;
}

legend,
button {
	font-size: 1.25em;
}

legend {
	font-weight: 700;
	padding-top: .5em;
	border-top: 1.5px solid lightgray;
	margin-bottom: 1.125em;
  color: #45a1ff;
}

input[type="text"],
input[type="email"],
legend {
	width: 100%;
}



label {
	color: #fff;
	display: block;
	margin-bottom: .5em;
}

input,
select {
	margin-bottom: 1.125em;
}

input {
	font-size: 1em;
	font-weight: 500;
	padding: .8em;
	background: silver;
	border: 2px solid #38383d;
	outline: none;
  border-radius: .75em;
}

input:focus {
	background: #fff;
	border-color: #45a1ff;
	transition: border-color .4s, background-color .4s;
}

input[type="checkbox"],
input[type="radio"] {
	display: inline-block;
}

button {
	color: #fff;
	padding: .55em 1.25em;
	background: #45a1ff;
	margin: 1.25em 0 1em;
	cursor: pointer;
  border-radius: .5em;
  font-weight: bold;
}

button:hover {
	background: #285d93;
}

#sum,
.activities span {
  color: #45a1ff;
}

.nameError,
.mailError {
  display: block;
  text-align: right;
  font-weight: bold;
  color: red;
  margin-bottom: 1em;
}

.buttonError,
.paymentError {
  display: block;
  text-align: left;
  font-weight: bold;
  color: red;
  margin-bottom: 1em;
}

.checkBoxError {
  display: block;
  text-align: left;
  font-weight: bold;
  color: red;
  margin-top: 1em;
}
/* =================================
  Page Styles
==================================== */

.container {
	margin: auto;
	max-width: 680px;
}

.shirt div {
	float: left;
	margin-right: .85em;
}

.interests input {
	margin-bottom: 0;
}

.credit-card {
	margin-top: 1.25em;
}

/* =================================
  Helper Classes
==================================== */

.is-hidden {
	display: none;
}

.clearfix::after {
  content: " ";
  display: table;
  clear: both;
}
/* =================================
  Media Queries
==================================== */

@media (min-width: 0) and (max-width: 679px) {
	header {
		padding: 2em 0;
	}
	button {
		width: 100%;
	}
}

@media (min-width: 680px) {
	header {
		padding: 4.65em 0 2.5em;
	}
	.col {
		float: left;
	}
	.col + .col {
		margin-left: 2.5%;
	}
	.col-3 {
		width: 23%;
	}
	.col-6 {
		width: 49%;
	}
}

              
            
!

JS

              
                //TEAM TREEHOUSE TECHDEGREE PROJECT 3, INTERACTIVE FORM, BY: GARRETT SIEGEL





//*****PAGELOAD

//RESETS FORM UPON PAGE LOAD
$('form')[0].reset();
//SETS FOCUS UP TO FIRST TEXT FIELD UPON PAGE LOAD
$("#name").focus();


//*****JOB ROLES

//HIDES OTHER JOB TITLE UPON PAGE LOAD
$('.other').hide();
//ON CHANGE FUNCTION FOR OTHER JOB TITLE
$('#title').on('change', () => {
  //IF JOB SELECTOR IS EQUAL TO OTHER
  if ($('#title').val() == "other") {
    //SHOW OTHER JOB INPUT BOX
    $('.other').slideDown();
  } else {
    //HIDE OTHER JOB INPUT BOX
    $('.other').slideUp();
  }
});


//*****T-SHIRT INFO

//INITIALLY SETS SIZE TO SMALL
$('#size').val('small').show();
//INITIALLY HIDES ALL T-SHIRT COLOR OPTIONS
$('#colors-js-puns').hide();
//ADDS RED CSS BORDER HIGHLIGHT TO DESIGN BOX
$('#design').css("border", "#45a1ff solid 2px");

//FUNCTION FOR WHEN T-SHIRT DESIGN OPTION IS CHANGED
$('#design').on('change', () => {
  //IF JS PUNS OPTION IS SELECTED
  if ($('#design option').eq(1).is(':selected')) {
    //SHOW COLORS BOX
    $('#colors-js-puns').show();
    //SHOW ALL COLOR OPTIONS
    $('#colors-js-puns option').show();
    //HIDES HEART JS COLOR OPTIONS
    $('#colors-js-puns option').slice(3,6).hide();
    //SHOWS INITIAL CHOICE AS FIRST COLOR OPTION
    $('#color').val('cornflowerblue').show();
    //REMOVES BORDER HIGHLIGHT
    $('#design').css("border", "#666 solid .5px");
  }
  //IF HEART JS OPTION IS SELECTED
  else if ($('#design option').eq(2).is(':selected')) {
    //SHOWS COLOR BOX
    $('#colors-js-puns').show();
    //SHOW ALL COLOR OPTIONS
    $('#colors-js-puns option').show();
    //HIDES JS PUNS COLOR OPTIONS
    $('#colors-js-puns option').slice(0,3).hide();
    //SHOWS INITIAL CHOICE AS FIRST COLOR OPTION
    $('#color').val('tomato').show();
    //REMOVES BORDER HIGHLIGHT
    $('#design').css("border", "#666 solid .5px");
  }
  else {
    //HIDES T-SHIRT COLOR OPTIONS BOX
    $('#colors-js-puns').hide();
    //ADDS RED CSS BORDER HIGHLIGHT TO DESIGN BOX
    $('#design').css("border", "#45a1ff solid 2px");
  }
});


//*****REGISTER FOR ACTIVITIES

//FUNCTIONS TO DIM ACTIVITIES THAT ARE AT SAME TIME UPON SELECTION
$('.activities').on('change', () => {
  if ($('.activities input').eq(1).is(':checked')) {
     $('.activities input').eq(3).attr('disabled', true);
     $('.activities label').eq(3).css("color", "dimgray");
   } else if ($('.activities input').eq(3).is(':checked')) {
        $('.activities input').eq(1).attr('disabled', true);
        $('.activities label').eq(1).css("color", "dimgray");
   } else {
     $('.activities input').filter(':eq(1), :eq(3)').attr('disabled', false);
     $('.activities label').filter(':eq(1), :eq(3)').css("color", "white");
   }
});

$('.activities').on('change', () => {
  if ($('.activities input').eq(2).is(':checked')) {
     $('.activities input').eq(4).attr('disabled', true);
     $('.activities label').eq(4).css("color", "dimgray");
   } else if ($('.activities input').eq(4).is(':checked')) {
        $('.activities input').eq(2).attr('disabled', true);
        $('.activities label').eq(2).css("color", "dimgray");
   } else {
     $('.activities input').filter(':eq(2), :eq(4)').attr('disabled', false);
     $('.activities label').filter(':eq(2), :eq(4)').css("color", "white");
   }
});


//SETS SUM TO ZERO
let $sum = 0;
//TEXT SPAN FOR TOTAL AMOUNT
const $total = $('<span>Total: $</span>');
//SPAN FOR SUM AMOUNT
let $sumText = $('<span id="sum"></span>');
//APPENDS SUM AMOUNT TO SPAN
$sumText.append($sum);
//APPENDS SUM SPAN TO TOTAL SPAN
$total.append($sumText);
//CSS TO BOLD TOTAL AND SUM TEXT
$total.css("font-weight", "bold");
//APPPENDS TOTAL TEXT TO END OF ACTIVITIES CLASS
$('.activities').append($total);

//TOTAL AMOUNT FUNCTION FOR CHOSEN ACTIVITIES
$('.activities input').on('change', event => {
  //SETS EVENT TARGET AS A VARIABLE
  const $eventTarget = $(event.target);
  //VARIABLE TO GET THE EVENT TARGET'S NAME ATTRIBUTE
  const $name = $eventTarget.attr('name');
  //CONDITION TO SEE IF CHECKBOX IS CHECKED
  if ($eventTarget.is(':checked')) {
      //IF CHECKED AND NAME ATTRIBUTE IS "ALL"
      if ($name === 'all') {
      //ADD $200 TO SUM
      $sum += 200;
      //IF CHECKED AND NAME ATTRIBUTE IS NOT "ALL"
      } else {
      //ADD $100 TO SUM
      $sum += 100;
    //IF NOT CHECKED
  }} else {
      //IF NOT UNCHECKED AND NAME ATTRIBUTE IS "ALL"
      if ($name === 'all') {
      //REDUCE $200 FROM SUM
      $sum -= 200;
      //IF NOT CHECKED AND NAME ATTRIBUTE IS NOT "ALL"
    } else {
      //REDUCE $100 FROM SUM
      $sum -= 100;
    }
  }
  //POPULATE SUM CLASS WITH THE TEXT CONTAINING CURRENT SUM AMOUNT
  $('#sum').text($sum);
});


//*****PAYMENT INFO

//CREDIT CARD OPTION VARIABLE
const $ccOption = $('#credit-card');
//PAYPAL OPTION VARIABLE
const $paypalOption = $('#credit-card').next();
$paypalOption.css("color", "gainsboro");
//BITCOIN OPTION VARIABLE
const $bitcoinOption = $('#credit-card').next().next();
$bitcoinOption.css("color", "gainsboro");
//DISABLES THE "SELECT PAYMENT METHOD OPTION"
$('#payment option').eq(0).prop('disabled', true);
//SETS CREDIT CARD AS DEFAULT PAYMENT DROP-DOWN METHOD
$('#payment').val('credit card').show();
//INITIAL HIDE OF PAYPAL INFO
$paypalOption.hide();
//INITIAL HIDE OF BITCOIN INFO
$bitcoinOption.hide();


//FUNCTION FOR CHANGES TO THE PAYMENT METHOD DROP-DOWN
$('#payment').on('change', () => {
  //SWITCH CONDITIONAL TO CHECK VALUE OF PAYMENT METHOD
  switch ($('#payment').val()) {
    //WHEN CREDIT CARD SELECTED, HIDE OTHER METHODS, SHOW CREDIT CARD INFO
    case 'credit card':
    $paypalOption.hide();
    $bitcoinOption.hide();
    $ccOption.fadeIn();
    break;
    //WHEN PAYPAL SELECTED, HIDE OTHER METHODS, SHOW PAYPAL INFO
    case 'paypal':
    $ccOption.hide();
    $bitcoinOption.hide();
    $paypalOption.fadeIn();
    break;
    //WHEN BITCOIN SELECTED, HIDE OTHER METHODS, SHOW BITCOIN
    case 'bitcoin':
    $ccOption.hide();
    $paypalOption.hide();
    $bitcoinOption.fadeIn();
    break;
  }
});


//*****VALIDATION

//*****BASIC INFO VALIDATION VARIABLES

//VARIABLE FOR SUBMIT BUTTON
const $submitButton = $('button');
//VARIABLE TO SET ERROR SPAN FOR SUBMIT BUTTON
const $buttonErrorSpan = $('<span class="buttonError">Please fix errors above before submitting form.</span>');
//PLACE SUBMIT BUTTON ERROR AFTER SUBMIT BUTTON
$submitButton.after($buttonErrorSpan);
//HIDE SUBMIT BUTTON ERROR
$buttonErrorSpan.hide();
//VARIABLE FOR NAME INPUT
const $nameInput = $('#name');
//VARIABLE TO SET ERROR SPAN FOR NAME INPUT
const $nameSpan = $('<span class="nameError">Please enter only alphabetic characters.</span>');
//PLACE NAME ERROR AFTER NAME INPUT
$nameInput.after($nameSpan);
//HIDE NAME INPUT ERRROR
$nameSpan.hide();
//VARIABLE TO SET BLANK NAME ERROR SPAN FOR NAME INPUT
const $nameSpan2 = $('<span class="nameError">Please enter a name.</span>');
//PLACE SECOND NAME ERROR AFTER NAME INPUT
$nameInput.after($nameSpan2);
//VARIABLE FOR EMAIL INPUT
const $mailInput = $('#mail');
//VARIABLE TO SET ERROR SPAN FOR EMAIL INPUT
const $mailSpan = $('<span class="mailError">Please enter a valid email address.</span>');
//PLACE EMAIL ERROR AFTER EMAIL INPUT
$mailInput.after($mailSpan);

//*****NAME INPUT VALIDATION
//FUNCTION FOR NAME INPUT VALIDATIONI UPON INPUT KEYUP
$nameInput.keyup( () => {
  //VARIABLE FOR NAME INPUT VALUE
  const $nameVal = $nameInput.val();
  //NAME INPUT REGULAR EXPRESSION
  const $nameRegex = /^[a-zA-Z]+(\s[a-zA-Z]+)?(\s)?$/i;
  //CONDITIONAL STATEMENT IF NAME VALUE IS NOT EMPTY
  if ($nameVal != "") {
    //IF EMPTY HIDE BLANK NAME ERROR MESSAGE
    $nameSpan2.hide();
    //IF NAME VALUE DOES NOT MATCH NAME REGEX
    if (!$nameVal.match($nameRegex)) {
      //SHOW NAME ERROR
      $nameSpan.show();
    } else {
      //HIDE NAME ERROR
      $nameSpan.hide();
    }
    //IF NAME VALUE IS EMPTY
  } else {
    //HIDE NAME ERROR
    $nameSpan.hide();
    //SHOW BLANK NAME ERROR
    $nameSpan2.show();
  }
});

//*****MAIL INPUT VALIDATION

//FUNCTION FOR EMAIL INPUT VALIDATION UPON KEYUP
$mailInput.keyup( () => {
  //VARIABLE FOR EMAIL INPUT VALUE
  const $mailVal = $mailInput.val();
  //EMAIL INPUT REGULAR EXPRESSION
  const $mailRegex = /^[^@]+@[^@.]+\.[a-z]+$/i;
  //CONDITIONAL STATEMENT IF EMAIL VALUE DOES NOT MATCH REGEX
  if (!$mailVal.match($mailRegex)) {
    //SHOW EMAIL ERROR
    $mailSpan.show();
  } else {
    //HIDE EMAIL ERROR
    $mailSpan.hide();
  }
});

//*****CHECKBOX VALIDATION
//VARIABLE FOR CHECKBOXES CLASS
const $checkBox = $('.activities');
//VARIABLE TO SET ERROR CHECKBOX CLASS
const $checkBoxSpan = $('<span class="checkBoxError">Please select at least one activity option.</span>');
//PLACE CHECKBOX ERROR AFTER CHECKBOXES
$checkBox.after($checkBoxSpan);

//FUNCTION FOR CHECKBOX VALIDATION UPON CHANGE
$checkBox.on('change', e => {
  //CONDITIONAL STATEMENT IF ANY CHECKBOXES ARE CHECKED
  if ($('input[type=checkbox]:checked').length) {
    //HIDE CHECKBOX ERROR
    $checkBoxSpan.hide();
  } else {
    //SHOW CHECKBOX ERROR
    $checkBoxSpan.show();
  }
});

//*****PAYMENT VALIDATION

//VARIABLE FOR EXPIRATION MONTH
const $expMonth = $('#exp-month');
//VARIABLE FOR PAYMENT SECTION
const $paymentMeth = $('#payment');
//VARIABLE FOR CREDIT CARD NUMBER
const $ccNum = $('#cc-num');
//VARIABLE TO SET BLANK INPUT ERROR FOR CREDIT CARD NUMBER
const $ccNumSpan = $('<span class="paymentError">Please enter a valid credit card number.</span>');
//VARIABLE TO SET REGEX ERROR FOR CREDIT CARD NUMBER
const $ccNumSpan2 = $('<span class="paymentError">Please enter a credit card number that is between 13 and 16 digits.</span>');
//PLACE BLANK CREDIT CARD ERROR BEFORE EXPIRATION MONTH
$expMonth.prev().before($ccNumSpan);
//PLACE CREDIT CARD REGEX ERROR BEFEORE EXPIRATION MONTH
$expMonth.prev().before($ccNumSpan2);
//HIDE CREDIT CARD REGEX ERROR
$ccNumSpan2.hide();

    //FUNCTION FOR CREDIT CARD NUMBER VALIDATION UPON KEYUP
    $ccNum.keyup( () => {
      //CONDITIONAL STATEMENT IF CREDIT CARD IS SELECTED AS PAYMENT METHOD VALUE
      if ($paymentMeth.val('credit card')) {
        //VARIABLE FOR CREDIT CARD NUMBER VALUE
        const $ccNumVal = $('#cc-num').val();
        //CREDIT CARD NUMBER INPUT REGULAR EXPRESSION
        const $ccNumRegex = /^\d{13,16}$/;
        //IF CREDIT CARD NUMBER VALUE FIELD IS NOT EMPTY
        if ($ccNumVal != "") {
          //HIDE BLANK INPUT CREDIT CARD NUMBER ERROR
          $ccNumSpan.hide();
          //IF CREDIT CARD NUMBER VALUE DOES NOT MATCH REGEX
          if (!$ccNumVal.match($ccNumRegex)) {
            //SHOW CREDIT CARD NUMBER REGEX ERROR
            $ccNumSpan2.show();
          } else {
            //HIDE CREDIT CARD NUMBER REGEX ERROR
            $ccNumSpan2.hide();
          }
          //IF CREDIT CARD NUMBER VALUE FIELD IS EMPTY
        } else {
          //HIDE CREDIT CARD NUMBER REGEX ERROR
          $ccNumSpan2.hide();
          //SHOW BLANK INPUT CREDIT CARD NUMBER ERROR
          $ccNumSpan.show();
        }
      }
    });

    //VARIABLE FOR ZIP CODE
    const $zip = $('#zip');
    //VARIABLE TO SET ERROR FOR ZIP CODE
    const $zipSpan = $('<span class="paymentError">Please enter a valid 5 digit zip code.</span>');
    //PLACE ZIP CODE ERROR BEFORE EXPIRATION MONTH
    $expMonth.prev().before($zipSpan);

        //FUNCTION FOR ZIP CODE VALIDATION UPON KEYUP
        $zip.keyup( () => {
          //CONDITIONAL STATEMENT IF CREDIT CARD IS SELECTED AS PAYMENT METHOD VALUE
          if ($paymentMeth.val('credit card')) {
            //VARIABLE FOR ZIP CODE VALUE
            const $zipVal = $('#zip').val();
            //ZIP CODE INPUT REGULAR EXPRESSION
            const $zipRegex = /^\d{5}$/;
            //CONDITIONAL STATEMENT IF ZIP CODE VALUE IS NOT EMPTY
            if ($zipVal != "") {
              //HIDE ZIP CODE ERROR MESSAGE
              $zipSpan.hide();
              //CONDITIONAL STATEMENT IF ZIP CODE VALUE DOES NOT MATCH REGEX
              if (!$zipVal.match($zipRegex)) {
                //SHOW ZIP CODE ERROR MESSAGE
                $zipSpan.show();
              } else {
                $zipSpan.hide();
              }
              //IF ZIP CODE VALUE IS EMPTY
            } else {
              //SHOW ZIP CODE ERROR
              $zipSpan.show();
            }
          }
        });

        //VARIABLE FOR CVV NUMBER
        const $cvv = $('#cvv');
        //VARIABLE TO SET ERROR FOR CVV NUMBER
        const $cvvSpan = $('<span class="paymentError">Please enter a valid 3 digit CVV number.</span>');
        //PLACE CVV NUMBER ERROR BEFORE EXPIRATION MONTH
        $expMonth.prev().before($cvvSpan);

            //FUNCTION FOR CVV NUMBER VALIDATION UPON KEYUP
            $cvv.keyup( () => {
              //CONDITIONAL STATEMENT IF CREDIT CARD IS SELECTED AS PAYMENT METHOD VALUE
              if ($paymentMeth.val('credit card')) {
                //VARIABLE FOR CVV NUMBER VALUE
                const $cvvVal = $('#cvv').val();
                //CVV NUMBER INPUT REGULAR EXPRESSION
                const $cvvRegex = /^\d{3}$/;
                //CONDITIONAL STATEMENT IF CVV NUMBER VALUE IS NOT EMPTY
                if ($cvvVal != "") {
                  //HIDE CVV NUMBER ERROR MESSAGE
                  $cvvSpan.hide();
                  //CONDITIONAL STATEMENT IF CVV NUMBER VALUE DOES NOT MATCH REGEX
                  if (!$cvvVal.match($cvvRegex)) {
                    //SHOW CVV NUMBER ERROR MESSAGE
                    $cvvSpan.show();
                  } else {
                    //HIDE CVV NUMBER ERROR MESSAGE
                    $cvvSpan.hide();
                  }
                  //IF CVV NUMBER VALUE IS EMPTY
                } else {
                  //SHOW CVV NUMBER ERROR
                  $cvvSpan.show();
                }
              }
            });


//*****BUTTON VALIDATION

//FUNCTION FOR SUBMIT BUTTON VALIDATION UPON CLICK
$submitButton.on('click', e => {
//VARIABLE FOR NAME INPUT VALUE
const $nameVal = $nameInput.val();
//VARIABLE FOR NAME INPUT REGUAR EXPRESSION
const $nameRegex = /^[a-zA-Z]+(\s[a-zA-Z]+)?(\s)?$/i;
//VARIABLE FOR EMAIL INPUT VALUE
const $mailVal = $mailInput.val();
//VARIABLE FOR EMAIL INPUT REGULAR EXPRESSION
const $mailRegex = /^[^@]+@[^@.]+\.[a-z]+$/i;
//VARIABLE FOR CREDIT CARD NUMBER VALUE
const $ccNumVal = $('#cc-num').val();
//VARIABLE FOR CREDIT CARD NUMBER REGULAR EXPRESSION
const $ccNumRegex = /^\d{13,16}$/;
//VARIABLE FOR ZIP CODE VALUE
const $zipVal = $('#zip').val();
//VARIABLE FOR ZIP CODE REGULAR EXPRESSION
const $zipRegex = /^\d{5}$/;
//VARIABLE FOR CVV NUMBER VALUE
const $cvvVal = $('#cvv').val();
//VARIABLE FOR CVV NUMBER REGULAR EXPRESSION
const $cvvRegex = /^\d{3}$/;

//CONDITIONAL STATEMENT IF NAME VALUE IS EMPTY OR DOES NOT MATCH REGEX
if ($nameVal == "" || !$nameVal.match($nameRegex)) {
  //PREVENT BUTTON DEFAULT ACTION
  e.preventDefault();
  //SHOW BUTTON ERROR
  $buttonErrorSpan.show();
} else {
  //HIDE BUTTON ERROR
  $buttonErrorSpan.hide();
}
//CONDITIONAL STATEMENT IF EMAIL VALUE DOES NOT MATCH REGEX
if (!$mailVal.match($mailRegex)) {
  //PREVENT BUTTON DEFAULT ACTION
  e.preventDefault();
  //SHOW BUTTON ERROR
  $buttonErrorSpan.show();
} else {
  //HIDE BUTTON ERROR
  $buttonErrorSpan.hide();
}
//CONDITIONAL STATEMENT IF THERE ARE NO CHECKBOXES CHECKED
if (!$('input[type=checkbox]:checked').length) {
  //PREVENT BUTTON DEFAULT ACTION
  e.preventDefault();
  //SHOW BUTTON ERROR
  $buttonErrorSpan.show();
} else {
  //HIDE BUTTON ERROR
  $buttonErrorSpan.hide();
}
//CONDITIONAL STATEMENT IF CREDIT CARD IS SELECTED AS PAYMENT METHOD VALUE
if ($paymentMeth.val() == 'credit card') {
  //VARIABLE FOR CREDIT CARD NUMBER VALUE
  const $ccNumVal = $('#cc-num').val();
  //VARIABLE FOR CREDIT CARD NUMBER REGULAR EXPRESSION
  const $ccNumRegex = /^\d{13,16}$/;
  //VARIABLE FOR ZIP CODE VALUE
  const $zipVal = $('#zip').val();
  //VARIABLE FOR ZIP CODE REGULAR EXPRESSION
  const $zipRegex = /^\d{5}$/;
  //VARIABLE FOR CVV NUMBER VALUE
  const $cvvVal = $('#cvv').val();
  //VARIABLE FOR CVV NUMBER REGULAR EXPRESSION
  const $cvvRegex = /^\d{3}$/;
  //CONDITIONAL STATEMENT IF CREDIT CARD NUMBER VALUE DOES NOT MATCH REGEX
  if (!$ccNumVal.match($ccNumRegex)) {
  //PREVENT BUTTON DEFAULT ACTION
  e.preventDefault();
  //SHOW BUTTON ERROR
  $buttonErrorSpan.show();
}
else {
  //HIDE BUTTON ERROR
  $buttonErrorSpan.hide();
}
//CONDITIONAL STATEMENT IF ZIP CODE VALUE DOES NOT MATCH REGEX
if (!$zipVal.match($zipRegex)) {
  //PREVENT BUTTON DEFAULT ACTION
  e.preventDefault();
  //SHOW BUTTON ERROR
  $buttonErrorSpan.show();
}
else {
  //HIDE BUTTON ERROR
  $buttonErrorSpan.hide();
}
//CONDITIONAL STATEMENT IF CVV NUMBER VALUE DOESN NOT MATCH REGEX
if (!$cvvVal.match($cvvRegex)) {
  //PREVENT BUTTON DEFAULT ACTION
  e.preventDefault();
  //SHOW BUTTON ERROR
  $buttonErrorSpan.show();
}
else {
  //HIDE BUTTON ERROR
  $buttonErrorSpan.hide();
}
}
});

              
            
!
999px

Console