Выберите этот вход во время события размытия

Question

У меня есть два поля с одинаковым именем. И когда я делаю размытие на одном из них, я хочу, чтобы это затронуло только то, на котором я сейчас нахожусь. Когда я пишу на входе, на них влияют, у меня есть код для проверки поля электронной почты, и поэтому я хотел бы использовать его без дублирования моего javascript кода.

Это пример: https://codepen.io/MehdiX/pen/PowXweR

let email_newsletter = $('input[name="email_newsletter"]');

let verifier_newsletter = false;

email_newsletter.blur(function()
{  
    if(confirmEmail(email_newsletter.val()))
    {
        email_newsletter.removeClass('__invalid');
        email_newsletter.addClass('__valid');
        verifier_newsletter = true;
    }
    else
    {
       email_newsletter.removeClass('__valid');
       email_newsletter.addClass('__invalid');
    }
});



/*  REGEX EMAIL */

function confirmEmail(email) {
    let regx_email = /^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
    if(regx_email.test(email)){
        return true;
    } else {
        return false;
    }
}

.__invalid {
  border:2px solid red;
}

.__valid {
  border:2px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="modal" action="index.php?action=subscribeNewsletter">
	<div class="form-group">
		<input type="email" name="email_newsletter" class="form-control" placeholder="Entrez votre E-Mail" required>
	</div>

	<button type="submit" name="submit_newsletter" class='p-2 rounded'>Valider</button>
</form>

<form action="index.php?action=subscribeNewsletter" method="post" class="subscribe_newsletter">
	<div class="form-group">
		<label for="email_newsletter">Inscrivez-vous ici :</label>
		<input type="email" name="email_newsletter" class="form-control" placeholder="Entrez votre E-Mail" required>
	</div>
</form>

Можно ли назначить один элемент с тем же именем?

Answer 1

Вам просто нужно использовать $(this), чтобы получить объект ввода, который стирается вместо всех входов. Смотрите ниже код

let email_newsletter = $('input[name="email_newsletter"]');
let verifier_newsletter = false;

email_newsletter.blur(function()
{  
    if(confirmEmail($(this).val()))
    {
        $(this).removeClass('__invalid');
        $(this).addClass('__valid');
        verifier_newsletter = true;
    }
    else
    {
       $(this).removeClass('__valid');
       $(this).addClass('__invalid');
    }
});



/*  REGEX EMAIL */

function confirmEmail(email) {
    let regx_email = /^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
    if(regx_email.test(email)){
        return true;
    } else {
        return false;
    }
}

.__invalid {
  border:2px solid red;
}

.__valid {
  border:2px solid green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="modal" action="index.php?action=subscribeNewsletter">
	<div class="form-group">
		<input type="email" name="email_newsletter" class="form-control" placeholder="Entrez votre E-Mail" required>
	</div>

	<button type="submit" name="submit_newsletter" class='p-2 rounded'>Valider</button>
</form>

<form action="index.php?action=subscribeNewsletter" method="post" class="subscribe_newsletter">
	<div class="form-group">
		<label for="email_newsletter">Inscrivez-vous ici :</label>
		<input type="email" name="email_newsletter" class="form-control" placeholder="Entrez votre E-Mail" required>
	</div>
</form>