Question

我已经整理了一个非常简单的竞赛剧本 - 它在下面评论过，您可以在http://www.jakeisonline.com/stackoverflow/jqueryvalidation/page/找到演示

我正在使用jquery插件来实现验证：http://bassistance.de/jquery-plugins/jquery-plugin-validation/

问题仅出在Firefox（3.5.2）中 - 表单提交时没有任何验证，并忽略了ajax。 IE8＆amp; 7似乎很好。

$("#f").validate({
        rules: {
            first_name: {
                required: function() {
                    if ($.trim($("#first_name").val()) === 'e.g. Jane') {
                        $("#first_name").val('').removeClass('example');
                        return $("#first_name").val();
                    }                       
                }
            },
            email: {
                required: function() {
                    if ($.trim($("#email").val()) === 'jane@example.com') {
                        $("#email").val('').removeClass('example');
                        return $("#email").val();
                    }
                }
            },
            friend_1_name: {
                required: function() {
                    if ($.trim($("#friend_1_name").val()) === 'e.g. Jane') {
                        $("#friend_1_name").val('').removeClass('example');
                        return $("#friend_1_name").val();
                    }                       
                }
            },
            friend_1_email: {
                required: function() {
                    if ($.trim($("#friend_1_email").val()) === 'jane@example.com') {
                        $("#friend_1_email").val('').removeClass('example');
                        return $("#friend_1_email").val();
                    }
                }
            },
            friend_2_name: {
                required: "#friend_2_email:filled"
            },
            friend_2_email: {
                required: "#friend_2_name:filled"
            },
            friend_3_name: {
                required: "#friend_3_email:filled"
            },
            friend_3_email: {
                required: "#friend_3_name:filled"
            }
        },
        submitHandler: function() {
            $("#submit").attr("disabled", "disabled");                  

            // See if they also opted-in to the main mailing list, if they did, set that interest and add them to the mailing list
            if ($('#optin').is(':checked')) {
                alert('hello');
                $.post("", { first_name: $("#first_name").val(), email: $("#email").val(), key: "sub-678-1.50;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-50.htm", 'prefs[]': ["1", "2"] });
                // Display the opt-in confirmation message
                $("#thanks_subscribing").fadeIn("slow");
                $("#optintickbox").hide();

                // Fade out the confirmation
                setTimeout(function() {
                    $("#thanks_subscribing").fadeOut("slow")
                },10000);

            } else {
                // Add them to the Entries Mailing List
            $.post("", { first_name: $("#first_name").val(), email: $("#email").val(), key: "sub-678-1.50;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-50.htm", followup: "1", prefs: "2"} );
            }

            // Now start going through their friends, the first friend will always be filled out, so we don't need to check that
            $.post("", { first_name: $("#friend_1_name").val(), email: $("#friend_1_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()} );

            if ($("#friend_2_email").val() !== '') {
                $.post("", { first_name: $("#friend_2_name").val(), email: $("#friend_2_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()} );
            }

            if ($("#friend_3_email").val() !== '') {
                $.post("", { first_name: $("#friend_3_name").val(), email: $("#friend_2_email").val(), key: "sub-678-1.51;1.0.1.0.0.0.0.0.0.0.0.0.0.0.0.0;2.1;subscribe-51.htm", followup: "2", custom_4: $("#first_name").val(), custom_5: $("#email").val()} );
            }

            // Remove all of the submitted data to stop button spamming
            $("#friend_1_name, #friend_1_email, #friend_2_name, #friend_2_email, #friend_3_name, #friend_3_email").val('');

            // Bring the submit button out of disabled state
            $("#submit").removeAttr("disabled");

            // Bring up the friends sent confirmation
            $("#friends_sent").fadeIn("slow");
            //$("#optin").attr('false', true);

            // Fade out the confirmation
            setTimeout(function() {
                $("#friends_sent").fadeOut("slow")
            },10000);

            return false;
        }
    });

我不确定为什么Firefox使用Refresh提交页面但是IE不是，我已经查看了代码并且无法找到错误。 Firebug只在jQuery库中发现错误。

有人可以帮忙吗？

Answer 1

您的XHTML 1.0 Transitional标记中存在各种验证问题。通过帮助你，IE很不错。 FF更严格，会失败。

缺少输入结束标记会对验证脚本中的选择器造成严重破坏。在第一个朋友的电子邮件中，它实际上是在尝试获取li元素的文本！

请参阅以下w3c validator check。首先解决这些问题，希望它会对问题进行排序。如果不报告，我会再看一遍。

jQuery验证在Firefox中无需验证即可提交

1 个答案: