JSFiddle - React, Tailwind, and code Playground

by Aldrin Gauran

HTML

<div id="groupContainer">
    <div id ="profileGroup1">
        <div class="item">
            Name1: <input type="text" id="name_1" value="">
        </div>
        <div class="item">
           Date1: <input type="text" id="date_1" value="">
        </div>
    </div>
    <div id ="profileGroup2">
        <div class="item">
            Number2: <input type="text" id="name_2" value="asdf">
        </div>
        <div class="item">
            Date2: <input type="text" id="date_2" value="">
        </div>
    </div>

JavaScript

$(function(){

    	var errorObj = {
        	group: {},
        	hasError: false
    	};

		function errorObjMange(groupNo, type, msg) {

			errorObj.hasError = true;
			groupNo = groupNo.toString();
			if (!errorObj.group[groupNo]) {
				errorObj.group[groupNo] = {};
			}

			errorObj.group[groupNo][type] = msg;
		}

		function alertError() { 
			var priority = {
				"1": new Array(), // Invalid date
				"2": new Array(), // empty name and inavlid date
				"3": new Array(), // empty naem and empty date
				"4": new Array(), // only empty name
				"5": new Array(), // only empty DATE
			} 

			for (var groupIndex in errorObj.group) {
				var group = errorObj.group[groupIndex];
				if (!group.emptyName && !group.emptyDate && group.invalidDate) {
					priority["1"].push(groupIndex);
				}

				if (group.emptyName && !group.emptyDate && group.invalidDate) {
					priority["2"].push(groupIndex);
				}

				if (group.emptyName && group.emptyDate  && !group.invalidDate) {
					priority["3"].push(groupIndex);
				}

				if (group.emptyName && !group.emptyDat && !group.invalidDate) {
					priority["4"].push(groupIndex);
				}

				if (!group.emptyName && group.emptyDate && !group.invalidDate) { 
					priority["5"].push(groupIndex);
				}

			}

			var groupStr = "Group: ";
			var msg = '';

			if (priority["3"].length) {
				groupStr += priority["3"].toString();
				msg = groupStr + '\n'
				    + 'Name is required\n'
				    + 'Date is required\n'; 
			} else if (priority["2"].length) {
				groupStr += priority["2"].toString();
				msg = groupStr + '\n'
				    + 'Name is required\n'
				    + 'Invalid Date\n';
			}  else if (priority["4"].length || priority["5"].length) {
                msg = '';
                
                if (priority["4"].length) {
                    
					groupStr = 'Group :' + priority["4"].toString(); 
					msg += groupStr + '\n'
				    	+ 'Name is required\n'; 
                }
                
                if (priority["5"].length)...