フォームにチェックと有効な電子メールが機能していないか確認してください。

Question

私は以下のjQueryを使用して、適切な電子メールアドレスが入力されていることを確認します。ここでマークアップは次のとおりです。

// reveal modal if info is filled out correctly 
 
$('.hero--input_button').click(function() { 
 
    if (($('.hero--input_check').is(":checked")) && ($('.hero--input_text').val().length >= 8)) { 
 
    $('#cta-modal').addClass('modal--show'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="email_signup" method="GET" target="_blank" novalidate="novalidate"> 
 
    <div class="klaviyo_field_group"> 
 
    <input type="email" value="" name="email" id="k_id_email" placeholder="Your email" class="hero--input_text" /> 
 
    <input type="checkbox" name="subscribe" value="yes" id="form--check_two" class="hero--input_check" checked /> 
 
    </div> 
 
    <div class="klaviyo_form_actions"> 
 
    <button type="submit" class="hero--input_button">Subscribe</button> 
 
    </div> 
 
</form>

私は（.heroについて - input_textと）if文から最後のビットを取る場合は、コードが正常に動作します。ちょうどその後、人々はボタンを押して、メールアドレスを入力せずにモーダルを見ることができます！

私のコードで何か問題があることは知っていますが、わかりません。助けやアドバイスをいただければ幸いです。

Answer 1

文字列の長さではなく、電子メールアドレスを検証する必要があります。ここでは、HTMLを投稿することができe-mail validation script

// reveal modal if info is filled out correctly 
 
$('.hero--input_button').click(function(){ 
 
    if ( $('.hero--input_check').is(":checked") 
 
     && isEmail($('.hero--input_text').val())) { 
 
    $('#cta-modal').addClass('modal--show'); 
 
    console.log('here'); 
 
    } 
 
}); 
 

 
function isEmail(email) { 
 
    var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/; 
 
    return regex.test(email); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="email_signup" method="GET" target="_blank" novalidate="novalidate"> 
 
     <div class="klaviyo_field_group"> 
 
      <input type="email" value="" name="email" id="k_id_email" placeholder="Your email" class="hero--input_text" /> 
 
      <input type="checkbox" name="subscribe" value="yes" id="form--check_two" class="hero--input_check" checked /> 
 
     </div> 
 
     <div class="klaviyo_form_actions"> 
 
      <button type="submit" class="hero--input_button">Subscribe</button> 
 
     </div> 
 
     </form>