如何使用jquery Validation验证Formspread

How validate the Formspree with jquery Validation?

本文关键字：验证 Formspread Validation jquery 何使用      更新时间：2023-09-26

我有一个带有Formspread的表单，但没有使用jQuery Validation进行验证。

这是我的HTML代码：

<form class="form" id="contactForm" action="//formspree.io/myemail@email.com" method="post">
    <input type="text" name="Name" placeholder="Your name" required>
    <input type="email" name="Email" placeholder="Email" required>
    <input type="tel" name="Phone" placeholder="Phone">
    <input type="text" name="Subject" placeholder="Subject">
    <textarea name="Message" cols="30" rows="10" placeholder="Message" required></textarea>
    <!-- CONFIG -->
    <input class="is-hidden" type="text" name="_gotcha">
    <input type="hidden" name="_subject" value="Contact by Site">
    <input type="hidden" name="_cc" value="cc@email.com">
    <!-- /CONFIG -->
    <input class="submit" type="submit" value="Send">
</form>

这是我的JS代码：

(function() {
    // FORM / CONTACT
    var $contactForm = $('#contactForm');
    // VALIDATE FORM
    $contactForm.validate();
    $contactForm.submit(function(e) {
        e.preventDefault();
        $.ajax({
            url: '//formspree.io/myemail@mail.com',
            method: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            beforeSend: function() {
                $contactForm.append('<div class="message message--loading">Sending message…</div>');
            },
            success: function(data) {
                $contactForm.find('.alert--loading').hide();
                $contactForm.append('<div class="message message--success">Message sent!</div>');
            },
            error: function(err) {
                $contactForm.find('.alert--loading').hide();
                $contactForm.append('<div class="message message--error">Ops, there was an error.</div>');
            }
        });
    });
})();

此时，发送的消息与白色字段相同。在我的情况下，验证只显示在CSS中，但不禁止用户发送。

您的代码不会阻止提交！

(function() {
    var $contactForm = $('#contactForm');
    // VALIDATE FORM
    $contactForm.validate();
    $contactForm.submit(function(e) {
        if ($(this).valid())
             {...}
       return false;
     });
})();
相关文章：