3

我编写了一个自定义表单验证脚本，但由于某种原因，将input[type=text]元素包装在<div class="inputWrapper" />阻止我阻止input[type=submit]默认设置。

以下是相关代码：

$("input[type=text]").wrap("<div class=\"inputWrapper\" />");

正在打破：

$("input[type=submit]").click(function(event) {
    event.preventDefault();
});

为什么会这样？如果您需要更完整的脚本，请告诉我，我会发布整个内容。

好吧，所以出于某种原因，禁用那行代码允许.preventDefault工作input[type=submit]，但如果我只是使用

// wrap inputs

    $("input[type=text]").wrap("<div class=\"inputWrapper\" />");
    // validate on form submit
    $("input[type=submit]").click(function(event) {
        event.preventDefault();
    });

它工作正常。所以这是完整的脚本，是什么导致了这种奇怪？

    $(document).ready(function() {
        // wrap inputs
        $("input[type=text]").wrap("<div class=\"inputWrapper\" />");
        $("textarea").wrap("<div class=\"inputWrapper\" />");
        // validate text inputs on un-focus
        $("input[type=text].required").blur(function() {
            if ($(this).hasClass("error")) {
                // do nothing
            } else if ($(this).val() === "") {
                $(this).addClass("error");
                $(this).parent(".inputWrapper").append("<div class=\"errorPopup\">" + $(this).attr("placeholder") + "</div>");
            }
        });
        // validate textareas on un-focus
        $("textarea.required").blur(function() {
            if ($(this).hasClass("error")) {
                // do nothing
            } else if ($(this).val() === "") {
                $(this).addClass("error");
                $(this).parent(".inputWrapper").append("<div class=\"errorPopup\">" + $(this).attr("placeholder") + "</div>");
            }
        });

        // validate on form submit
        $("input[type=submit]").click(function(event) {
            event.preventDefault();
            // check fields

            $(this).parent("form").children("input.required").each(function() {
            // check textboxes

            if ($(this + "[type=text]")) {
                if (!$(this).val()) {
                    $(this).addClass("error");
            };
            };

            // end textboxes
    // check textareas
            $(this).parent("form").children("textarea.required").each(function() {
            if (!$(this).val()) {
                    $(this).addClass("error");
                };
            });

            // end textareas
        // check checkboxes and radio buttons
        if ($(this).is(":checkbox") || $(this).is(":radio")) {
                var inputName = $(this).attr("name");
                if (!$("input[name=" + inputName + "]").is(":checked")) {
                    var inputId = $(this).attr("id");
            $("label[for=" + inputId + "]").addClass("error");
                };
            };

            // end checkboxes and radio buttons
        });

        // end fields
        // submit form
        var errorCheck = $(this).parent("form").children(".error").length > 0;
            if (errorCheck == 0) {
                $(this).parent("form").submit();
            } else {
                alert("You didn't fill out one or more fields. Please review the form.");
                window.location = "#top";
            };
        // end submit form
    });
    // clear errors 
    $("input.required").each(function() {
        // clear textboxes
            if ($(this + "[type=text]")) {
                $(this).keypress(function() {
                    $(this).removeClass("error");
                    $(this).next(".errorPopup").remove();
                });
            };
        // end textboxes
        // clear textareas
            $("textarea.required").each(function() {
                $(this).keypress(function() {
                    $(this).removeClass("error");
                    $(this).next(".errorPopup").remove();
                });
            });
        // end textareas
        // check checkboxes and radio buttons
            if ($(this).is(":checkbox") || $(this).is(":radio")) {
                var inputName = $(this).attr("name");
                var labelFor = $(this).attr("id");
                $(this).click(function() {
                    $("input[name=" + inputName + "]").each(function() {
                        var labelFor = $(this).attr("id");
                        $("label[for=" + labelFor + "]").removeClass("error");
                    });
                });
            };
        // end checkboxes and radio buttons
    });
    // end clear textbox errors
});

好吧，我错了问题所在。它与我认为的行有关，但实际上.error在我包装输入后找到问题。

这就是问题所在：

var errorCheck = $(this).parent("form").children(".error").length > 0;`\
4

2 回答 2

2 
var errorCheck = $(this).parent("form").children(".error").length > 0;

当您.wrap输入文本时，它们不再是表单的子项。采用.find

顺便说一句，$(this + "selector")是无效的。您可能想使用$(this).is("selector")

于 2013-04-04T13:30:24.273 回答
0

您将需要使用新的 DOM 元素维护某种引用。这将首先将其作为初始化的 DOM 元素放置在变量中（而不是像您所做的那样作为字符串），并且对于原始元素也是如此，原始元素将被放回以维护事件：

var $inputWrapper = $("<div class=\"inputWrapper\" />"),
    $inputText = $("input[type=text]");
$inputText.wrap("<div class=\"inputWrapper\" />");

然后您可以将元素替换回来。

于 2013-04-04T13:26:39.190 回答