Check if form has check and valid email not working

Question

I have the following jQuery to make sure that a proper email address is in the input and they have also checked a checkbox for a modal to show. Here is the markup:

// 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 I take out the last bit from the if statement (regarding the .hero--input_text) the code works fine. Just then people can hit the button and see the modal without entering an email address!

I know something is wrong with my code but I am not sure what. Any help or advice is greatly appreciated.

your code is working fine as expected. Btw you are just checking the length of the email you need a regex to check the valid email format. — Niladri, Oct 11 '17 at 20:24
It is basically impossible to correctly validate an email address with regex. (But checking that the length is greater than eight characters isn't a great method either.) Test for the presence of one `@` and at least one `.` and call it a day. — Daniel Beck, Oct 11 '17 at 20:31

score 0 · Answer 1 · answered Oct 11 '17 at 20:35

You should validate for e-mail address, not string length. Here's an example implementing 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>

Check if form has check and valid email not working

1 Answers1