jQuery表单验证与邮件检查功能冲突

我对JS/jQuery有点陌生，在页脚有一个表单和一个全局表单，用于时事通讯，这似乎与电子邮件字段验证....相冲突我知道需要改变什么来解决这个问题，那就是将验证单击/电子邮件检查功能附加到元素的父表单，但对于我的生活无法解决。

所以在一个but shell中，需要下面的内容来为它的父表单工作，因为它似乎影响了使用相同验证的其他表单。

$( 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();
    }
  });
});

我想添加全局变量

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

我认为这是正确的方法....但是我猜lol

页面表单:

<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>

页脚注册:

<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>