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