在提交时使用 jQuery 验证表单答案

【问题标题】：Validate form with jQuery on submit在提交时使用 jQuery 验证表单
【发布时间】：2011-07-21 21:54:01
【问题描述】：

当我点击提交按钮时，我有这个功能：

$('#signup-button').click(function(event){
            var username_check = validateUsernameField();
            var email_check = validateEmailField();
            var name_check = validateNameField();
            var birthdate_check = validateBirthdateField();
            event.preventDefault();
            if(username_check && email_check && name_check && birthdate_check) {
                alert('lol');
                var formData = $('#FonykerAddForm').serialize();
                $.ajax ({
                    type: 'POST',
                    url: '<?php echo $html->url('/fonykers/add',true); ?>',
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        $( "#confirm-dialog" ).html(response.msg).dialog({
                            autoOpen: false,
                            modal: true,
                            height: 140,
                            title: response.title
                        });       
                        $('#confirm-dialog').dialog('open');
                    },
                    error: function (xhr, ajaxOptions, thrownError){
                        alert('Cualquier vaina');
                        alert(xhr.statusText);
                        alert(thrownError);
                    }
                });
            }
        });

我之前在我的字段上调用了模糊事件的验证方法，它们都工作并且这里的验证似乎工作，问题是在 if 语句之后没有任何反应，表单没有提交。有人知道为什么吗？如果没有，您能想出一个更好的方法来在提交之前验证我的所有字段吗？

【问题讨论】：

您是否尝试过在 Firebug 中设置断点并逐行执行。此外，您可以尝试在表单“提交”事件上运行，例如$('form.my_form').submit(function() { if ($(this).find('input.my_input').val().length > 20) { return false; //return false 阻止提交of form } return true; //提交表单 });
您检查过您的if 是否曾经是true？
定义一个匹配的else{alert("!lol");}看看是否显示
好吧，它进入了else，这很奇怪，因为所有的字段都被标记为有效（它们正常时变成绿色）
在萤火虫中运行我看到除了birthdate_check之外它们都标记为未定义

标签： jquery forms validation

【解决方案1】：

问题是我在 if 语句中使用的变量有些返回未定义，所以它搞砸了调用。我只是将检查变量替换为检查我的 DOM 元素上的设置类，以查看它们是否有错误并且工作正常。

【讨论】：

【解决方案2】：

我认为问题出在event.preventDefault()，

如果您认为它阻止了提交表单的默认操作，它将不起作用，因此，更好的选择是在您调用的每个函数中使用return false;。

例如

function validateUsernameField(){

     if($("#UsernameField").val()=="") {
        // your username actions
        return false;
     }
     else
     {
     username_check = 1  
     return true;
     }
}

if(username_check == 1 && email_check == 1 && name_check == 1 && birthdate_check == 1) {
    alert('lol');

    var formData = $('#FonykerAddForm').serialize();
    $.ajax ({
        type: 'POST',
        data: formData,
        dataType: 'json',
        success: function(response) {
            $( "#confirm-dialog" ).html(response.msg).dialog({
                autoOpen: false,
                modal: true,
                height: 140,
                title: response.title
            });       
            $('#confirm-dialog').dialog('open');

        },
        error: function (xhr, ajaxOptions, thrownError){
            alert('Cualquier vaina');
            alert(xhr.statusText);
            alert(thrownError);
        }
    });

}else{
    alert ('There is something wrong');
    return false;
}

【讨论】：

如果我不阻止默认设置，它将执行默认的 POST 操作并且不会执行 AJAX 调用。