JSFiddle - React, Tailwind, and code Playground
by Aldrin Gauran
HTML
<div id="groupContainer">
<div id ="profileGroup1">
<div class="item">
Number1: <input type="text" id="number_1" value="20">
</div>
<div class="item">
Date1: <input type="text" id="date_1" value="12345">
</div>
</div>
<div id ="profileGroup2">
<div class="item">
Number2: <input type="text" id="number_2" value="">
</div>
<div class="item">
Date2: <input type="text" id="date_2" value="">
</div>
</div>
</div>
JavaScript
$(function(){
var len = $('#groupContainer > div').length;
var data = [];
for(var i=0; i < len; i++){
var number = $('#number_' + [i + 1]);
var date = $('#date_' + [i + 1]);
var count = i + 1;
var message ="";
var a = number.map(function(){
return this.value;
});
var b = date.map(function(){
return this.value;
});
var newObj = {number: a[0], date: b[0]}
data.push(newObj);
}
console.log(data);
var message = "";
for(var c = 0; c < data.length; c++)
{
haveErrorInGroup = false;
for(var d in data[c])
{
if(data[c].hasOwnProperty(d))
{
if(data[c][d] == "")
{
if(!haveErrorInGroup){
haveErrorInGroup= true;
message += 'Group: ' + [c + 1] + '\n';
}
message += d + ' is required!\n';
}
if(d == "date")
{
if(data[c][d].length != 22 && data[c][d] != "")
{
message += 'Invalid Date!\n';
}
}
}
}
}
if(message){
alert(message);
}
});