HTML5 必需属性不适用于 AJAX 提交

Posted 2023-03-05

【中文标题】HTML5 必需属性不适用于 AJAX 提交

【英文标题】：HTML5 required attribute not working with AJAX submission

【发布时间】：2016-06-14 02:57:01

【问题描述】：

我正在尝试对只需要一封电子邮件的简单时事通讯表格进行一些基本验证。我在页面中拥有这个表单/输入的方式，真的没有空间添加任何 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.
        
    );
);

【问题讨论】：

因为Ajax调用onclick按钮与表单提交无关。浏览器不知道 Ajax 调用与表单有关。您需要询问表单是否有效或绑定到提交事件，而不是按钮单击。

如果用户使用键盘提交，也可以轻松绕过绑定到按钮

@charlietfl 你指的是把我的按钮 id 放在我的 ajax 点击函数中，对吧？ $("#footer-grid1-newsletter-submit").on("click", function (event) 。那么，我应该总是绑定我的表单吗？

不完全是......如果用户在键盘上点击Enter，表单的提交事件会触发但不点击按钮。忘记按钮

@charlietfl 明白了！很好的建议。谢谢！

【参考方案1】：

原因是因为验证是在表单的submit 事件上完成的，而您已将事件与单击提交按钮挂钩。试试这个：

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

Working example

关于验证最小输入长度，您可以使用pattern 属性：

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

【讨论】：

太好了，谢谢！如果我没有记错的话。 required 属性不适用于 Safari，对吗？如果是这种情况，你会推荐什么备份，或者你会推荐做一些完全不同的事情。

你说得对，required（还有pattern）在 Safari 中不起作用。它正在迅速转向这几十年的 Internet Explorer。作为一种解决方法，我建议您使用jQuery validate，因为您已经在页面中包含了 jQuery。

我有 jQuery 验证其他地方，我只是不喜欢错误类的灵活性。我的输入没有太多空间，因为它在我的页脚中，所以我不知道该怎么做才能让它脱颖而出。