4

我试图让我的表单在使用 Ajax 请求将表单提交到我的 php 脚本之前进行验证。我查看了 stackoverflow 并没有找到有效的方法。

我有 3 个输入和一个提交按钮：

<input type="text" name="full-name" id="full-name" value="" placeholder="Full Name" />
<input type="text" name="email" id="email" value="" placeholder="Email" />
<textarea name="message" id="message" value="" rows="8" placeholder="Message"></textarea>
<input type="submit" id="contact-submit" class="contact-submit" value="Submit">
<div id="messageResponse" class="center" style="display:none;"></div>

$(document).ready(function() {

    function validator(){
        return $('form').validate();
    }

    $('form').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            dataType: 'html',
            type: 'post',
            url: 'mail.php',
            data: $('#contact-form').serialize(),
            beforeSubmit: validator,
            success: function(responseData) {
                $('#contact-submit').remove();
                $('#messageResponse').fadeIn(1000);
                $('#messageResponse').html(responseData);
            },
            error: function(responseData){
                console.log('Ajax request not recieved!');
            }
        });

        // resets fields
        $('input#full-name').val("");
        $('input#email').val("");
        $('textarea#message').val("");
    })
});

我应该为此使用插件吗？我想要的只是名称、电子邮件和消息，以使用红色边框颜色进行验证。这让我很头疼，明天我将与客户会面以完成该网站。如果我找不到可行的解决方案，我不会提问。

我也尝试过使用它：jQuery Form Validator Plugin

4

2 回答 2

4

您$('form').validate()指的是jQuery Validate 插件吗？

submit如果是这样，当 jQuery Validate 插件已经内置了提交事件处理程序回调函数时，使用处理程序绝对没有意义，而这正是您应该放置 ajax 的地方。

根据 Validate plugin 的文档，submitHandler回调函数是：

“表单有效时处理实际提交的回调。获取表单作为唯一参数。替换默认提交。在验证后通过 Ajax 提交表单的正确位置。”

试试这个代码，假设你的ajax函数是正确的：

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your rules and options,
        submitHandler: function (form) {
            $.ajax({
                dataType: 'html',
                type: 'post',
                url: 'mail.php',
                data: $(form).serialize(),
                success: function (responseData) {
                    $('#contact-submit').remove();
                    $('#messageResponse').fadeIn(1000);
                    $('#messageResponse').html(responseData);
                },
                error: function (responseData) {
                    console.log('Ajax request not recieved!');
                }
            });
            // resets fields
            $('input#full-name').val("");
            $('input#email').val("");
            $('textarea#message').val("");

            return false; // blocks redirect after submission via ajax
        }
    });

});

演示：http: //jsfiddle.net/kUX2N/

于 2013-03-03T05:46:04.780 回答
3

beforeSubmit 是 malsup ajaxForm 插件的一个选项，而不是 jQuery ajax。仅当 validator() 返回 true 时才执行 ajax。

$('form').on('submit', function(e) {
    e.preventDefault();
    if (validator()){
        $.ajax({...});
    }
});

在旁边：

而不是使用多行要求 jQuery 多次选择同一事物，您可以使用链。

$('#messageResponse').fadeIn(1000).html(responseData);

同样，对几个元素做同样的事情

$('#full-name, #email, #message').val("");
于 2013-03-03T02:38:21.870 回答