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>

如果我从if语句中取出最后一位（关于.hero - input_text），代码工作正常。就在这时，人们可以点击按钮，看到模态，而无需输入电子邮件地址！

我知道我的代码有问题，但我不确定是什么。非常感谢任何帮助或建议。

Answer 1

您应该验证电子邮件地址，而不是字符串长度。这是实施e-mail validation script

的示例

＆＃13;

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

＆＃13;

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

＆＃13;

检查表单是否有检查且有效的电子邮件无效

1 个答案: