jQuery form validation conflicting with email check function

Question

I am a little new to JS / jQuery and have a page with a form and a global form in the footer for a newsletter which seems to be comflicting with the email field validation.... i know what needs to change to fix this and that is to attach the validate click / email check function to the elements parent form but for the life of me cannot work it out.

So in a but shell need the following to work for its parent form only as it seems to be effecting other forms using same validation.

$( document ).ready(function() {

  function validateEmail($email) {
    var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    return emailReg.test( $email );
  }

  function inputReset(element) {
    if (element.hasClass('error')) {
      element.removeClass("error");
      element.siblings('.error-message').remove();
    }
  }

  // Validation
  $('.validate-form').on('click', function(event) {
      event.preventDefault();

      var valid = true,
          message = '';

      $('form.validate input').each(function() {
        var $this = $(this);
        inputReset($this); 

        if($this.prop('required')){

          // check for errors, if found lets get the messages for output
          if(!$this.val()) {
            $(this).addClass("error");
            var inputName = $this.attr('name');
            message = $this.data('error-message');
            valid = false;
          }

          // validate the email input
          if($(this).hasClass('validate-email')) {
            var emailAddress = $this.val();
            if(!validateEmail(emailAddress)) { 
              $this.addClass("error");
              valid = false;
            }
          }

          $('.error-message[data-input-name="' + inputName + '"]').remove();
          // if not validated lets display the errors
          if(!valid) {
            //alert(message);
            $this.after('<div class="error-message" data-input-name="' + inputName + '">' + message + '</div>');
          }

        }

      });

    if(valid) {
      $(".validate-form").submit();
    }

  });

});

I had the idea of adding to the global var

form = $(this).closest("form").attr('id')

which i think is the right approach.... but guessing lol

Page Form:

<div class="col-right form-vertical">
  <form id="email_page_signup" class="klaviyo_bare_embed_twtw2v validate" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate>
    <input type="hidden" name="g" value="twtw2v">
    <input type="hidden" name="$fields" value="first_name,last_name" />

    <div class="klaviyo_messages">
      <div class="success_message">
        <p class="thank_you notice success" style="display:none;">Thank's for signing up to The newsletter!</p>
      </div>
    </div>

    <div class="klaviyo_field_group">
      <label for="k_id_first_name" class="kl_label">First Name:</label>
      <input type="text" value="" name="first_name" id="k_id_first_name" data-error-message="You forgot to enter your first name." required />
    </div>
    <div class="klaviyo_field_group">
      <label for="k_id_last_name" class="kl_label">Last Name:</label>
      <input type="text" value="" name="last_name" id="k_id_last_name" data-error-message="You forgot to enter your last name." required />
    </div>
      <div class="klaviyo_field_group">
      <label for="k_id_email" class="kl_label">E-mail:</label>
      <input type="email" value="" name="email" id="k_id_email" class="validate-email" data-error-message="Seem's the email address you entered is invalid." required />
    </div>
    <div class="klaviyo_form_actions">
      <button type="submit" class="btn klaviyo_submit_button validate-form">Sign Up</button>
    </div>
  </form>
</div>

<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script type="text/javascript"> 
  KlaviyoSubscribe.attachToForms('#email_page_signup', { 
    hide_form_on_success: true, 
    success: function ($form) { 
      $(".kl_label").hide(); 
      $(".klaviyo_messages .success_message .thank_you").show(); 
    }, 
    custom_success_message: true,
    extra_properties: { 
      $source: 'The Signup', 
      Brand: 'brand name'
    }
  });
 </script>

Footer signup:

<form id="email_signup" class="klaviyo_bare_embed_qd9hAF validate input-group" action="//manage.kmail-lists.com/subscriptions/subscribe" data-ajax-submit="//manage.kmail-lists.com/ajax/subscriptions/subscribe" method="GET" target="_blank" novalidate>
        <input type="hidden" name="g" value="qd9hAF">

        <div class="klaviyo_messages">
          <div class="success_message">
            <p class="thank_you notice success" style="display:none;">Thank's for signing up to the Skinnydip newsletter!</p>
          </div>
        </div>
          <div class="klaviyo_field_group">
          <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" name="email" id="k_id_email" class="validate-email input-group-field" autocorrect="off" autocapitalize="off" placeholder="Enter your email address" data-error-message="Seem's the email address you entered is invalid." required />
        </div>
        <div class="klaviyo_form_actions input-group-btn">
          <button type="submit" class="btn klaviyo_submit_button validate-form">Sign Up</button>
        </div>
      </form>

      <script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
      <script type="text/javascript"> 
        KlaviyoSubscribe.attachToForms('#email_signup', { 
          hide_form_on_success: true, 
          success: function ($form) { 
            //$(".kl_label").hide(); 
            $(".klaviyo_messages .success_message .thank_you").show(); 
          }, 
          custom_success_message: true,
          extra_properties: { 
            $source: 'Site Sign Up', 
            Brand: 'brand name'
          }
        });
       </script>

Answer 1

The trouble you are having is because the jQuery selectors you are using to get the input fields is scanning the whole page. They should be only searching for inputs relative to form that has triggered the validation.

You are on the right track with getting the form closest to the context of the validation click. Note the changes:

Get the form:

var form = $(this).closest("form");

Search the form for input fields:

form.find('input').each(function() {

Only clear error messages from the specific form:

form.find('.error-message[data-input-name="' + inputName + '"]').remove();

Only submit the specific form not both of them:

 form.submit();

Full change:

$('.validate-form').on('click', function(event) {
  event.preventDefault();
  var form = $(this).closest("form");
  var valid = true,
      message = '';

  form.find('input').each(function() {
    var $this = $(this);
    inputReset($this); 

    if($this.prop('required')){

      // check for errors, if found lets get the messages for output
      if(!$this.val()) {
        $(this).addClass("error");
        var inputName = $this.attr('name');
        message = $this.data('error-message');
        valid = false;
      }

      // validate the email input
      if($(this).hasClass('validate-email')) {
        var emailAddress = $this.val();
        if(!validateEmail(emailAddress)) { 
          $this.addClass("error");
          valid = false;
        }
      }

      form.find('.error-message[data-input-name="' + inputName + '"]').remove();
      // if not validated lets display the errors
      if(!valid) {
        //alert(message);
        $this.after('<div class="error-message" data-input-name="' + inputName + '">' + message + '</div>');
      }
    }
    });

  if(valid) {
    form.submit();
  }
});