JSFiddle - React, Tailwind, and code Playground
HTML
<input type="text" class="seq" value="" />
<br /><input type="text" class="seq" value="" />
<br /><input type="text" class="seq" value="" />
<br /><input type="text" class="seq" value="" />
<br /><input type="text" class="seq" value="" />
<br /><input type="text" class="seq" value="" />
<br /><input type="text" class="seq" value="" />
<br />
<input type="button" value="Submit" id="submit" />
JavaScript
$(function() {
$("#submit").click(function() {
//build a profile of the inputs
var inputs = [];
var values = [];
var dups = false; //track duplicates on pass 1
$(".seq").each(function(i, el) {
var empty = (el.value == ""); //check if empty
var exists = (!empty && $.grep(inputs, function(item, index) {
return (item.Value === el.value);
}).length > 0); //check if exists
dups = (dups || exists); //track dups
//add the new input item
var obj = {
Element: el,
Value: el.value,
Empty: empty,
Exists: exists
};
inputs.push(obj);
//conditionally add the sorting value
if (!empty && !exists)
values.push(el.value);
});
//Validate the inputs. If there are duplicates, don't submit
$(".seq").css("background-color", "white"); //clear errors
if (dups) {
$(inputs).each(function(i, el) {
if (el.Exists)
el.Element.style.backgroundColor = "red";
});
} else {
values = values.sort();
alert(values);
}
});
});