jQueryフォームの検証と電子メールチェック機能との競合

Question

私はJS/jQueryに少し新しく、電子メールフィールドの検証と矛盾しているようなニュースレターのためのフッターにフォームとグローバルフォームを持つページを持っています...私はこの問題を解決するために何が変わる必要があるかを知っています。それは、要素の親フォームにクリック/電子メールチェック機能の検証を添付することですが、私の人生はそれを解決できません。

したがって、シェルでは、同じ検証を使用して他のフォームを実行しているように見えるので、親フォームのみを処理するには次のものが必要です。

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

：

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

    }); 

}); 

は私が

ページのフォームを、私は正しいアプローチだと思うグローバルVAR

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

に追加する....しかし、笑推測のアイデアを持っていました

フッター申込：

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