JSFiddle - React, Tailwind, and code Playground
HTML
<form>
USER 1
<input name="user1" value="bla1">
<input name="pass1" value="ple1">
<input name="email1" value="[email protected]">
USER 2
<input name="user2" value="bla2">
<input name="pass2" value="ple1">
<input name="email2" value="[email protected]">
USER 3
<input name="user3" value="bla1">
<input name="pass3" value="pla3">
<input name="email3" value="[email protected]">
<button type="submit">
</form>
CSS
input.error {background:red}
JavaScript
$('form').submit(function(event) {
var ok = true,
$form = $(this),
$inputs = $(this).find('input')
$inputs.removeClass('error')
$inputs.each(function() {
var $src = $(this)
//Get the name of the element, and strip off the number
var name = $(this).attr('name').replace(/[0-9]/g,'')
//Filter the inputs down to only the ones whose name starts the same
$inputs.not(this).filter('[name^="' + name + '"]').each(function() {
if($src.val() == $(this).val()) {
ok = false
$(this).addClass('error')
$src.addClass('error')
}
})
})
if(!ok) event.preventDefault()
})