在通过 Ajax 请求提交之前使用 jQuery 进行表单验证

Form Validation with jQuery before submitting via Ajax request

提问by fryvisuals

I'm trying to get my form to validate before using an Ajax request to submit the form to my php script. I've looked through stackoverflow and haven't found something that worked.

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

I have 3 inputs and a submit button:

我有 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("");
    })
});

Should I use a plugin for this? All I want is the name, email, and message to validate with a red border-color. It's giving me a big headache and I'm meeting with the client tomorrow to finalize the site. I don't ask questions if I can't find a working solution.

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

I tried using this as well: jQuery Form Validator Plugin

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

采纳答案by Popnoodles

beforeSubmit is an option of the malsup ajaxForm plugin, not jQuery ajax. Execute the ajax only if validator() returns true.

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

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

Aside:

在旁边：

Instead of using multiple lines asking jQuery to select the same thing more than once you can use a chain.

您可以使用链，而不是使用多行要求 jQuery 多次选择相同的内容。

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

Similarly, for doing the same thing to several elements

同样，对于多个元素做同样的事情

$('#full-name, #email, #message').val(""); 

回答by Sparky

Is your $('form').validate()referring to the jQuery Validate plugin?

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

If so, there is absolutely no point in using a submithandler when the jQuery Validate plugin already has the submit event handler callback function built in, and this is exactly where you are supposedto put your ajax.

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

As per the documentation for the Validate plugin, the submitHandlercallback function is:

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

"Callback for handling the actual submit when the form is valid. Gets the form as the only argument. Replaces the default submit. The right place to submit a form via Ajaxafter it validated."

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

Try this code, assuming your ajaxfunction is correct:

试试这个代码，假设你的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
        }
    });

});

DEMO: http://jsfiddle.net/kUX2N/

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