HTML5必需屬性不適用於AJAX提交

Question

我正在嘗試對我只需要電子郵件的簡單時事通訊表格進行一些基本驗證。 我在頁面中有這個表單/輸入的方式，實際上沒有空間添加任何jQuery驗證錯誤消息，所以我試圖添加一個簡單的HTML 5必需屬性，但表單提交無論是否為空。

為此添加一些簡單驗證的最佳方法是什么，以便表單檢查電子郵件地址，填寫，最小長度為4個字符？

<form action="" method="POST" id="newsletter-form">
    <input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" required>
    <input type="submit" id="footer-grid1-newsletter-submit" name="submit" value='&nbsp'>
</form>

$("#footer-grid1-newsletter-submit").on("click", function (event) {
    event.preventDefault();
    var newsletter_email = $("#footer-grid1-newsletter-input").val();
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $.ajax({ 
        url: "newsletterSend.php", 
        type: "POST",
        data: {
            "newsletter_email": newsletter_email
        },
        success: function (data) {
            //  console.log(data); // data object will return the response when status code is 200
            if (data == "Error!") {
                alert("Unable to insert email!");
                alert(data);
            } else {
                $("#newsletter-form")[0].reset();
                $('.newsletter-popup').fadeIn(350).delay(2000).fadeOut();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            alert(textStatus + " | " + errorThrown);
            //console.log("error"); //otherwise error if status code is other than 200.
        }
    });
});

Answer 1

原因是因為驗證是在表單的submit事件上完成的，但您已將事件掛鈎到單擊提交按鈕。 嘗試這個：

$("#newsletter-form").on("submit", function (event) {
    event.preventDefault();
    // your code...
});

工作實例

關於驗證最小輸入長度，您可以使用pattern屬性：

<input type="email" id="footer-grid1-newsletter-input" placeholder="Your Email Address" pattern=".{3,}" required>