Select specific element of a partial view

Question

I'm having difficulty applying a javascript function inside a partial view.

My goal here is to verify that email was typed correctly and insert a message text depending on the outcome of the condition.

This email field is inside a partial that is loaded. This partial is loaded if the user has one or more emails, thus loading as many partials as needed.

My problem here is that for every partial that my page loads, the function replicates, I'd like the partial validation result not to interfere with the other. Follow the partial code below.

<li class="control-group3 nested-fields">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email:</label>
    <div class="col-sm-5">
      <%= person.text_field :name, class:"form-control" %>
    </div>
  </div>
  <br/>
  <div class="form-group">
    <label class="col-sm-2 control-label">Email Type:</label>
    <div class="col-sm-5">
      <%= person.collection_select :email_type_id, @email_type,
      :id, :name, {prompt: true}, {class: "form-control m-b"} %>
    </div>
  </div>
  <br/>
  <%= link_to_remove_association button_tag('Remover', type: "button", class: "btn btn-link"), person %>
  <hr/>
</li>
<script>

**$("input[name*='[emails_attributes]']").blur(function() {**
  var input = $(this).val();
  function IsEmail(email) {
    var exclude = /[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
    var check = /@[\w\-]+\./;
    var checkend = /\.[a-zA-Z]{2,3}$/;
    if (((email.search(exclude) != -1) || (email.search(check)) == -1) || (email.search(checkend) == -1)) {
      return false;
    } else {
      return true;
    }
  }

  **if (IsEmail(input)) {
    $(this).after("<div id='msgemail'>E-mail válido</div>");
  } else {
    $(this).after("<font color='red'>E-mail inválido </font>");
  }**
});

</script>

Answer 1

First of all, you need to separate the javascript logic from this partial (to avoid logic repetition).

And I suggest a different approach:

https://jsfiddle.net/vinceshere/np3v2qnf/28/

$(".email-validation").on("input", function() {
  var email = $(this).val();

  if (IsEmail(email)) {
    showSuccess($(this));
  } else {
    showError($(this));
  }
});

$("form").on("submit", function(event) {
    event.preventDefault();
  var email = $(this).find('.email-validation').val();

  if (IsEmail(email)) {
    showSuccess($(this));
  } else {
    showError($(this));
  }
});

function showError(element) {
    element.parents('form').find('.success').hide();
  element.parents('form').find('.error').show();
}

function showSuccess(element) {
    element.parents('form').find('.success').show();
  element.parents('form').find('.error').hide();
}

function IsEmail(email) {
  var exclude = /[^@\-\.\w]|^[_@\.\-]|[\._\-]{2}|[@\.]{2}|(@)[^@]*\1/;
  var check = /@[\w\-]+\./;
  var checkend = /\.[a-zA-Z]{2,3}$/;
  if (((email.search(exclude) != -1) || (email.search(check)) == -1) || (email.search(checkend) == -1)) {
    return false;
  } else {
    return true;
  }
}