Question

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

$('#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语句没有任何反应之后，表单没有提交。有谁知道为什么？如果没有，你能想到在提交之前验证我所有领域的更好方法吗？

Answer 1

问题是我在if语句中使用的变量有些返回undefined因此搞砸了调用。我只是替换检查变量以检查我的DOM元素上的set类，看看它们是否有错误并且工作正常。

Answer 2

我认为问题是event.preventDefault()，

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

e.g。

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;
}

在提交时使用jQuery验证表单

2 个答案: