Question

我目前遇到了HTML表单的问题。我正在尝试验证表单（规则在HTML 5代码中），然后使用$ .ajax调用将其提交到php脚本来处理。目的是确保在提交之前填写各个字段，并使用ajax打印任何其他错误（用户存在，使用中的电子邮件，Web开发人员无能为力等）。否则，如果一切正常，则意味着隐藏表单并显示确认消息。

使用下面的代码，验证工作正常，但$ .ajax调用没有 - 表单的默认操作触发intead。但是，如果我注释掉validate函数及其submitHandler（及其结束括号），则表单提交正常。现在，我已经砸了几天，没有运气。任何人都能提供的帮助或见解将不胜感激。

这是我正在运行的javascript。

<script type="text/javascript">
$(document).ready(function() {

    $("#Submit").click(function() {

        $("#mrf").validate({
            submitHandler: function() {
                    // Begin the submit handler function
                    var action = $("#mrf").attr('action');
                    var msg_success = '<p style="font-weight: bold;">Your registration was successful! You should receive a welcome email shortly.</p>';
                    var form_data = {
                        Surname: $("#Surname").val(),
                        First_Name: $("#FirstName").val(),
                        Other_Names: $("#OtherNames").val(),
                        Address: $("#Address").val(),
                        Suburb: $("#Suburb").val(),
                        State: $("#State").val(),
                        Postcode: $("#Postcode").val(),
                        Email: $("#Email").val(),
                        Username: $("#Username").val(),
                        INSTEP: $("#INSTEP").val(),
                        Mobile: $("#Mobile").val(),
                        Cohort: $("#Cohort").val(),
                        Academy: $("input:radio[name=Academy]:checked").val(),
                        University: $("#University").val(),
                        Program: $("#Program").val(),
                        NonUni: $("#NonUni").val(),
                        Mentoring: $("input:checkbox[name=Mentoring]:checked").val(),
                        CAS: $("input:checkbox[name=CAS]:checked").val(),
                        Motivational_Speaking: $("input:checkbox[name=MotivationalSpeaking]:checked").val(),
                        Workshops: $("input:checkbox[name=Workshops]:checked").val(),
                        Tutoring: $("input:checkbox[name=Tutoring]:checked").val(),
                        Newsletter: $("input:checkbox[name=Newsletter]:checked").val(),
                        is_ajax: 1
                    };

                    $.ajax({
                        type: "post",
                        url: action,
                        data: form_data,
                        success: function(response) {
                            if(response == 'success')   {
                                $("#mrf-form").slideUp('slow', function() {
                                    $("#ajaxResponse").html(msg_success);
                                });
                            }
                            else    {
                                $('#ajaxResponse').html("<p class='error'>" + response + "</p>");
                            }
                        }
                    });
                    // End the submit handler function      
                }
        });

        return false;
    });

});
</script>

Answer 1

制作本

e.preventDEfault();

函数中的第一行

$("#Submit").click(function(e){});

这个wat至少默认的提交事件不会被解雇; 然后检查$.ajax({上方所有行中的错误因为如果他们有任何错误，那么javascript将停止执行，默认提交功能将被调用你可以通过使用开发人员工具“F12”来做到这一点即。检查表单数据中的所有值是否正确填充。

Answer 2

不能直接回答您的问题，但您可能更容易使用验证插件。我一直在使用它，我很高兴，它很简单但可扩展，它在客户端看起来很棒，如果你需要它还有i18n支持：

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

话虽如此，如果您坚持使用自定义代码执行此操作，则可能需要让submitHandler函数返回false。您已经在提交数据，因此您不希望触发该操作。

jQuery form.validate（）回调无法执行（$ .ajax）

2 个答案: