<div class="container">
  <div class="formBox">
    <form id="thisForm" action="">
    <div class="reqFields">
      <p>Required Fields</p>

      <div class="formField">
        Textbox (Required) <span class="red asterisk">*</span> <br><br>
        <input id="textbox1" type="text" value="" class="required" maxlength="20">
        <div class="alertBox"></div>
      </div>

      <div class="formField">
        Select Box (Required) <span class="red asterisk">*</span><br><br>
        <select id="field2" class="required">
          <option value="">--select one--</option>
        <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
        </select>
        <div class="alertBox"></div>
      </div>

      <div class="formField">
        Radio Buttons (Required) <span class="red asterisk">*</span>
        <br><br><input type="radio" name="field3" value="option1" class="required"> Option 1<br>
        <br><input type="radio" name="field3" value="option2" class="required"> Option 2<br>
        <br><input type="radio" name="field3" value="option3" class="required"> Option 3<br>
        <br><input type="radio" name="field3" value="option4" class="required"> Option 4
        <div class="alertBox"></div>
      </div>

      <div class="formField">
        Check boxes (Required) <span class="red asterisk">*</span><br><br>
        <input type="checkbox" name="check1" value="1" class="required"> Option 1<br><br>
        <input type="checkbox" name="check1" value="2" class="required"> Option 2<br><br>
        <input type="checkbox" name="check1" value="3" class="required"> Option 3<br><br>
        <input type="checkbox" name="check1" value="4" class="required"> Option 4
<div class="alertBox"></div>
      </div>
      
      <div class="formField">
        Date Field (Required and Date values only) <span class="red asterisk">*</span><br><br>
      <input id="dateBox" type="text"  placeholder="mm/dd/yyyy" name="dateBox" value="" autocomplete="off" class="dateField required"><div class="alertBox"></div>
        
    </div>
      
      <div class="formField">
        Numeric Field (Required and Numeric values only) <span class="red asterisk">*</span><br><br>
      <input id="numBox" type="text"  name="numBox" value="" autocomplete="off" class="numeric required" ><div class="alertBox"></div>
        
    </div>

    </div> <!-- required fields -->
      </div>
    <div class="formBox">
  <div class="nonReqFields">
  
  <p>Non-Required Fields</p>
   <div class="formField">
      Textbox (Not Required) <br><br>
      <input id="textbox2" value="" maxlength="20">
        <div class="alertBox"></div>
    </div>
    
    <div class="formField">
      Select Box (Not Required) <br><br>
      <select id="field2">
        <option value="">--select one--</option>
      <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
      </select>
        <div class="alertBox"></div>
     </div>
  
    <div class="formField">
      Radio Buttons (Not Required)
      <br><br><input type="radio" name="field3" value="option1"> Option 1<br>
      <br><input type="radio" name="field3" value="option2"> Option 2<br>
      <br><input type="radio" name="field3" value="option3"> Option 3<br>
      <br><input type="radio" name="field3" value="option4"> Option 4
        <div class="alertBox"></div>
    </div>
    
    <div class="formField">
      Check boxes (Not Required)<br><br>
      <input type="checkbox" name="check2" value="1"> Option 1<br><br>
      <input type="checkbox" name="check2" value="2"> Option 2<br><br>
      <input type="checkbox" name="check2" value="3"> Option 3<br><br>
      <input type="checkbox" name="check2" value="4"> Option 4
      
        <div class="alertBox"></div>
    </div>
    
    <div class="formField">
      Date Field (Not Required and Date values only)  <br><br>
      <input type="text"  placeholder="mm/dd/yyyy" name="DateField" value="" autocomplete="off" class="dateField"><div class="alertBox"></div>
        
    </div>
    
      <div class="formField">
        Numeric Field (Not Required and Numeric values only)<br><br>
      <input type="text"  name="numBox" value="" class="numeric" autocomplete="off" ><div class="alertBox"></div>
        
    </div>
    
  </div> <!-- not required fields --->
    </div>
  </div>
    <button style="float:left;" type="button">Validate!</button>
  </form>
  
<div id="success"></div>
</div>

* {
  font-family:sans-serif;
  font-size:16px;
}

.container {display:flex;justify-content:space-evenly;align-items:flex-start;}
.red {color:red;}
.formField {
  padding: 10px;
    margin: 0;
    border-bottom: 1px solid #ccc;
   
}
.formBox {flex-basis:40%;}
.alertBox {font-style:italic;font-size:85%;display:block;padding: 5px;color: red;}
#success { color:red; font-weight:bold;text-align:center;}
.invalid {
        background: #f9e7e7;
    padding: 10px;
    border-radius: 5px;
    /* font-size: 115%; */
    /* width: 90%; */
    border: 1px solid red;
    transition: all .2s ease-in;
    margin: 10px;
}
.reqFields {
  padding:10px;
  border:1px solid #aaa;
  border-radius:7px;
}

.nonReqFields {
  padding:10px;
  border:1px solid #aaa;
  border-radius:7px;
}

p {font-weight:bold; border-bottom:1px solid #aaa; padding-bottom:5px;}

function addInvalid (element, msg) {
  $(element).parent("div").addClass("invalid");
  $(element).next("div").html(msg);
  valid+=1;  // increment counter
}

function isNumber(thisField) {
    if ($(thisField).length > 0) {
        var str = $(thisField).val();
        var sym = /[^0-9a-zA-Z ]/;
        var numeric = /[0-9 ]/g;
        var alpha = /[a-zA-Z ]/g;
        var alertField=$(thisField).next("div");
        if(str.match(sym) || str.match(alpha)){
            //$(alertField).html("Numeric values only!");
            addInvalid($(thisField),"Numeric Values Only");
        }
        if (str.match(numeric) && (!str.match(sym) && !str.match(alpha))){
            $(alertField).html(""); 
            $(thisField).parent("td").removeClass("invalid");
        }
    }
}

function isValidDate(dateVal) {
    var dateValue = dateVal.val();
    dateValue = dateValue.replace(/-/g,'/');
    var n = new Date();
    // valid date value?
    if (dateValue != "") {
        var d = new Date(dateValue);
        //console.log(d.toString());
        if (d.toString() === 'Invalid Date') {
            addInvalid(dateVal,"Invalid Date");
        } 
    } 
    
    // not future date?
    if (d > n) {
        addInvalid(dateVal,"Date cannot be in the future.");
    }

}

/* global */
var valid=0;

$("button").click(function() {
  valid=0; // reset valid variable on each submit
  $('.invalid').removeClass('invalid'); // clear any existing validation 
  
  /* text boxes */
  $("input").each(function(i, obj) {
    if ($(this).val() == "" && $(this).hasClass('required')) {
      valid += 1;
      addInvalid($(this), "Required Field"); // mark the parent div with "invalid" class
    } 
  });
    
  /* select boxes */
  $("select").each(function(i, obj) {
    if ($(this).val()=="" && $(this).hasClass('required')) {
      valid += 1;
      addInvalid($(this), "Required Field"); // mark the parent div with "invalid" class
    }
  }); // select 
  
  /* radio buttons */
  $("input:radio").each(function(){
    var name = $(this).attr("name");
    if($("input:radio[name="+name+"]:checked").length == 0 && $(this).hasClass("required")){
      valid += 1;
      addInvalid($(this), "Required Field");  // mark the parent div with "invalid" class     
    }
  });
  
  /* check boxes */
  var arrCheckboxGroups = [];
  $("input:checkbox").each(function() {
    arrCheckboxGroups.push($(this).attr("name"));
  });
  var uniq = arrCheckboxGroups.reduce(function(a,b){
    if (a.indexOf(b) < 0 ) a.push(b);
    return a;
  },[]);
  var thisCheckBoxGroup = "";
  $(uniq).each(function (index, value) { 
    //console.log("Length=" + $("input[name="+value+"]:checked").length + " " + "Has Class=" + $("input[name="+value+"]").hasClass("required"));
   if($("input[name="+value+"]:checked").length == 0 && $("input[name="+value+"]").hasClass("required")) {
     valid += 1;
     addInvalid($("input[name="+value+"]"), "Required Field");
   } 
});
  
  // date field
  $(".dateField").each( function(obj,value) {
    isValidDate($(this));
  });
  
  // numeric fields
  $(".numeric").each( function(obj,value) {
        isNumber($(this),"Numeric Values Only"); 
    });
                              
  if (valid == 0) {
    $("#success").html("Valid!");  
  } else {
    $("#success").html("Not valid!");
  }
  return(false)
});

$(document).ready(function() {
   $("input[type=text]").keyup(function() {
     $(this).parent("div").removeClass("invalid");
     $(this).next("div").html("");
   });
  $("select").change(function() {
     $(this).parent("div").removeClass("invalid");
    $(this).next("div").html("");
   });
  $("input[type=radio]").click(function() {
     $(this).parent("div").removeClass("invalid");
    $(this).next("div").html("");
   });
  $("input[type=checkbox]").click(function() {
     $(this).parent("div").removeClass("invalid");
    $(this).next("div").html("");
   });
});