检查表单是否有检查和有效的电子邮件不工作

我有以下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>

如果我拿出从if语句（关于.hero - INPUT_TEXT）的最后一位的代码工作正常。就在这时，人们可以按下按钮并查看模式，而无需输入电子邮件地址！

我知道我的代码有问题，但我不知道是什么。任何帮助或建议，不胜感激。

来源

2017-10-11 user4889134

你可以张贴HTML的例子吗？ – Niladri

您的代码正常工作正常。顺便说一句，你只是检查电子邮件的长度，你需要一个正则表达式来检查有效的电子邮件格式。 – Niladri

使用正则表达式正确验证电子邮件地址基本上是不可能的。（但是检查长度是否大于8个字符也不是一个好方法。）测试一个“@”和至少一个“。”的出现并且每天调用它。 –

您应该验证电子邮件地址，而不是字符串长度。下面是实施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>

来源

2017-10-11 20:35:50

检查表单是否有检查和有效的电子邮件不工作

回答

相关问题