表單驗證后，表單不提交

Question

所以我的問題是這個。 我的電子郵件和復選框上有一些“驗證”，以檢查它們是否為空。 這似乎可行，但是在填寫並檢查它們之后，我仍然收到警告消息（.error）彈出窗口，並且該表單未提交。

我以前僅使用電子郵件進行此操作，但需要添加協議復選框。

這是代碼和jsfiddle 。

感謝您的任何幫助！

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

Answer 1

編輯：請先看看Stefano Dalpiaz的答案，因為他指出了您的錯誤。

---

檢查字符串是否為空所需要做的就是if ( !email ) （ 如何在JavaScript中檢查空字符串？ ）。 您也可以使用.is(':checked')來確定是否選中了一個復選框。

這是一個有效的小提琴： 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();
        });

Answer 2

您的代碼中有一些錯誤。 對於復選框，您正在檢查其值的.checked屬性，並且復選框的值是一個字符串。 在檢查電子郵件之前，我還添加了else語句。 沒有它，即使您沒有選中該復選框，請求也會被發送。 這是更新的版本：

$(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;
    });
});

這是JsFiddle 。