Validation - error zone

error zone at beginning of form, outlining issues.

by jasonday

HTML

<link rel="stylesheet" href="https://www.llbean.com/css/forms.css">
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.js"></script>
<h3>My Form</h3>

<form class="formElements" id="example2">
  <div class="form-group">
    <label for="example2-fullname">Full name</label>
    <input type="text" class="form-control" id="example2-fullname" name="example2-fullname" required>
  </div>
  <div class="form-group">
    <label for="example2-zip">Zip code</label>
    <input type="tel" class="form-control" id="example2-zip" name="example2-zip" required aria-describedby="zipHelper">
    <div class="helperText" id="zipHelper">
      U.S. zipcodes only
    </div>
  </div>
  <div class="form-group">
    <label for="example2-state">State</label>
    <select class="form-control" id="example2-state" name="example2-state" required>
      <option disabled selected>Select</option>
      <option>Maine</option>
      <option>Maryland</option>
      <option>Massachusetts</option>
    </select>
  </div>
  <div class="form-group">
    <label for="example2-email">Email</label>
    <input id="example2-email" name="example2-email" type="text" required aria-describedby="emailHelper">
    <div class="helperText" id="emailHelper">
      [email protected]
    </div>
  </div>
  <div class="form-group inline-group">
    <fieldset>
      <legend>Choose an age:</legend>
      <label class="radio inline" for="adult">
        Adult (18+)
      
      <input id="adult" type="radio" name="qv1" value="1" required></label>
      <label class="radio inline" for="youth">
        Youth (15-17)
      
      <input id="youth" type="radio" name="qv1" value="2" required></label>
      <label class="radio inline" for="minor">
        Youth (8-14)
      
      <input id="minor" type="radio" name="qv1" value="3" required></label>
    </fieldset>
  </div>
  <div class="form-group inline-group">
    <label for="emailOptinFlag" class="email_optin_ca checkbox inline">
      <input...

CSS

body {
  background: #fff;
}

* {
  font-family: sans-serif;
  font-size: 14px !Important;
}

#example2 {
  max-width: 600px;
}

.checkbox label.inputError {
  margin-left: -18px;
  margin-top: 8px;
}

.form-group {
  padding-bottom: 15px;
}

.errorList {
  border: 2px solid #ED0404;
  padding: 10px;
  margin: 0 0 20px 0;
}

.errorList span {
  margin-bottom: 10px;
  display: block;
}

.errorList span::before {
  content: "";
  background: url('https://www.dropbox.com/s/yu5o29rmivp6bgl/error_red.png?raw=1') no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: text-bottom;
  margin-right: 5px;
}

.errorList a {
  color: #000;
}

input.error {
  border: 1px solid #ED0404;
}

input.valid,
select.valid {
  border: 1px solid #368700
}

input:focus,
select:focus {
  box-shadow: 0px 0px 3px #e9e9e9;
}

select.error {
  border: 1px solid #ED0404;
}

.inputError {
  margin-top: -3px;
  font-style: normal !important;
  font-size: 14px !important;
	color: #ED0404;
}

.inputError::before {
  content: "";
  background: url('https://www.dropbox.com/s/yu5o29rmivp6bgl/error_red.png?raw=1') no-repeat;
  background-size: contain;
  width: 20px;
  height: 20px;
  float: left;
  margin-right: 5px;
	margin-top: -2px;
}

#errors .icon {
  background: url('https://www.dropbox.com/s/yu5o29rmivp6bgl/error_red.png?raw=1') no-repeat left center;
  background-size: contain;
  vertical-align: text-bottom;
  padding: 3px 25px;
}

#example2.errorHide label.error span {
  display: none !important;
}

.formElements label,
.formElements input,
.formElements button,
.formElements select,
.formElements textarea,
.formElements span.label {
  font-size: 14px;
}

.formElements input,
.formElements textarea,
.formElements select,
.formElements .uneditable-input {
  padding: 5px;
}

.formElements label.inputError,
.formElements .inputError div.inputError {
  color: #ED0404 !important;
}

fieldset {
  padding: 0 0 5px 0;
  border: 0;
  width:...

JavaScript

$(document).ready(function() {

   // a11y - specify field container for error/success states; addresses different parent structure depending on field type
   var fieldContainer = ".form-group"

   var submitted = false;
   //validation rules
   $("#example2").validate({
     //set this to false if you don't what to set focus on the first invalid input
     focusInvalid: false,
     //by default validation will run on input keyup and focusout
     //set this to false to validate on submit only
     onkeyup: true,
     onfocusout: true,
     errorClass: "inputError",
     validClass: "inputSuccess",
     errorElement: "div",
     unhighlight: function(element, errorClass, validClass) {
       var $parent = $(element).parents(fieldContainer);
       var $fieldset = $parent.find('fieldset');
       var $type = $(element).attr('type');
       // changed from errorClass/validClass so that the error and the parent container would not have the same class
			 $parent.removeClass("errorWrapper").addClass("successWrapper");
       $parent.find('div.helperText, div.passwordMeter').show();

       //a11y - bug in demo
       $parent.find('.inputError').remove();


     },
     highlight: function(element, errorClass, validClass) {
       var $parent = $(element).parents(fieldContainer);
	$parent.addClass("errorWrapper").removeClass("successWrapper");
       $parent.find('div.helperText, div.passwordMeter').hide();


     },
     //by default the error elements is a <label>
     showErrors: function(errorMap, errorList) {

       if (submitted) {
         //a11y - remove/reset error list
         if ($('.errorList').length) {
           $('.errorList').remove();
         }
         //a11y - create error list panel
         var summary = "<div class='errorList' role='alert' aria-live='alert' tabindex='0'><span>Correct the following errors to continue:</span><ul>";
         $.each(errorList, function(i) {
           // list errors as anchor links to field
           summary +=...