0

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

使用下面的代码，验证可以正常工作，但 $.ajax 调用不能 - 表单的默认操作会触发。但是，如果我注释掉 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>
4

2 回答 2

0

做这个

e.preventDEfault();

函数的第一行

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

这至少不会触发默认提交事件；然后检查上述所有行中的错误，$.ajax({
因为如果它们有任何错误，则 javascript 将停止执行并调用默认提交函数，您可以使用开发人员工具“F12”来执行此操作，
即。检查表单数据中的所有值是否正确填写。

于 2012-05-01T09:18:08.113 回答
0

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

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

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

于 2012-05-01T09:18:25.947 回答