After form validation, form doesn't submit

Question

So my issue is this. I have some "validation" on my email and checkbox to check whether they are empty. That seemed to work, but after they have been filled in and checked I still get my warning message (.error) popup and the form does not submit.

I had this working previously with just the email, but needed to add the checkbox for an agreement.

Here is the code and a jsfiddle.

Thank you for any help!

html:

<form class="form" action="">
    <div class="wrapper-input email">
        <input id="email" type="text" name="email" placeholder="youremailaddress@example.com" />
        <button class="form-submit submit">Sign-Up</button>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div class="wrapper-input">
        <input type="checkbox" id="terms" name="terms" value="Agree"> <span>Click to agree</span>

    </div> </form> <div class="modal">
    <div class="modal-title">
         <h4 class="success">Submission Successful!</h4>

         <h4 class="error">Submission Error!</h4>

        <img class="close" src="img/close-x.png" alt="close" />
    </div>
    <div class="modal-content">
        <p class="success">Sucess</p>
        <p class="error">Error!</p>
    </div> </div>

javascript:

$(document).ready(function() {
    $(".submit").click(function() {
        var email = $("#email").val();
        var dataString = 'email='+ email;
        var terms = $("input:checkbox#terms").val();

        if (!terms.checked) {
          $('.lk-modal').show();
            $('.success').hide();
            $('.error').show();
        }  

        if (email ==='') {
          $('.lk-modal').show();
              $('.success').hide();
            $('.error').show();
        }

        else {
            $.ajax({
            type: "POST",
            url: "collect.php",
            data: dataString,
            success: function(){
                $('.lk-modal').show();
                $('.success').show();
                $('.error').hide();
            }
      });
    }
return false;
  });
});

score 3 · Accepted Answer · edited May 23 '17 at 11:57

Edit: Please look at Stefano Dalpiaz answer first as he points out your mistakes.

All you have to do to check if a string is empty is this if ( !email ) (How do you check for an empty string in JavaScript?). You can also use .is(':checked') to determine if a checkbox is checked.

Here is a working fiddle: http://jsfiddle.net/p28am/1/

HTML:

<form class="form" action="">
    <div class="wrapper-input email">
        <input id="email" type="text" name="email" placeholder="youremailaddress@example.com" />
        <button class="form-submit submit">Sign-Up</button>
        <div class="clear"></div>
    </div>
    <div class="clear"></div>
    <div class="wrapper-input">
        <input type="checkbox" id="terms" name="terms" value="Agree"> <span>Click to agree</span>

    </div>
</form>
<div class="modal">
    <div class="modal-title">
         <h4 class="success">Submission Successful!</h4>

         <h4 class="error">Submission Error!</h4>

        <img class="close" src="img/close-x.png" alt="close" />
    </div>
    <div class="modal-content">
        <p class="success">Sucess</p>
        <p class="error">Error!</p>
    </div>
</div>

JS:

$(document).ready(function () {
    $(".submit").click(function () {
        var email = $("#email").val();
        var dataString = 'email=' + email;
        var terms = $("input:checkbox#terms").is(':checked');

        if (!email || !terms) {
            $('.modal').show();
            $('.success').hide();
            $('.error').show();
        } else {
            $.ajax({
                type: "/echo/json/",
                url: "collect.php",
                data: dataString,
                success: function () {
                    $('.modal').show();
                    $('.success').show();
                    $('.error').hide();
                }
            });
        }
        return false;
    });
});

        $('.close').click(function(e){
            e.preventDefault();
            $('.modal').hide();
        });

Nice code. Good catch on the if / else structure correction - you should expand your answer to explain that the original if / else structure was flawed, and was not going to work quite right. — random_user_name, May 09 '14 at 03:21
@cale_b I just saw Stefano's answer appear before that pointed out his error. I will place an edit up the top of my answer to to point to the other one first +1 on the other answer. — adamj, May 09 '14 at 03:23

Stefano Dalpiaz · Answer 2 · 2014-05-09T03:41:28.760

There are a few errors on your code. For the checkbox, you are checking the .checked property of its value, and the value of a checkbox is a string. I have also added an else statement before checking for the email. Without it, the request would be sent even if you didn't check the checkbox. Here is the updated version:

$(document).ready(function () {
    $(".submit").click(function () {
        var email = $("#email").val();
        var dataString = 'email=' + email;
        var terms = $("input:checkbox#terms");

        if (!terms.is(":checked")) {
            $('.modal').show();
            $('.success').hide();
            $('.error').show();
        }

        else if (email === '') {
            $('.modal').show();
            $('.success').hide();
            $('.error').show();
        } else {
            $.ajax({
                type: "/echo/json/",
                url: "collect.php",
                data: dataString,
                success: function () {
                    $('.modal').show();
                    $('.success').show();
                    $('.error').hide();
                }
            });
        }
        return false;
    });
});

And here is the JsFiddle.

thank you for pointing that out. I actually had it like that in one of the hundreds of things I attempted today :P Appreciate you explaining it. — vms, May 09 '14 at 03:37

After form validation, form doesn't submit

2 Answers2