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

Question

我是JS / jQuery的新手，并且在页脚中有一个页面，其中包含一个表单和一个全局表单，其中似乎有一个与电子邮件字段验证冲突的新闻通讯。...我知道需要进行哪些更改才能解决此问题，并且也就是将验证点击/电子邮件检查功能附加到元素父表单，但对我而言一生无法解决。

因此，在一个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')

我认为这是正确的方法....但猜测大声笑

页面形式：

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

Answer 1

您遇到的麻烦是因为用于获取输入字段的jQuery选择器正在扫描整个页面。 他们应该只搜索与触发验证的表单相关的输入。

您将表格移到最接近验证点击上下文的正确位置。 注意更改：

获取表格：

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

在表单中搜索输入字段：

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

仅清除特定形式的错误消息：

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

仅提交特定的表格，而不是全部提交：

 form.submit();

完整更改：

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