如何找到 html 并将其定向回 $(this) 的子项。使用 JQuery 验证器

Question

我有一个生成动态数量表单的网页，我想使用验证器插件用相同的 jquery 解析所有这些表单。每个表单都包含一个唯一的 id 值，但我无法弄清楚如何使用 $(this) 将成功和错误注释返回到表单输出中。下面是其中一种形式：

<div class="container">
<div class="row">
    <div class="col-md-12">
        <form id="form-04" role="form">
            <div name="form-status"></div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                    <input class="form-control" id="FromEmail" name="FromEmail" placeholder="Your Email Address" type="text">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>
                    <input class="form-control" id="ToEmail" name="ToEmail" placeholder="Your Friends Email Address" type="text">
                </div>
            </div>
            <div class="form-group">
                <textarea class="form-control" id="Message" name="Message" placeholder="Your Message, 512 characters max." rows="5"></textarea>
            </div>
            <div class="form-group">
                <button class="btn btn-primary" style="float: right;" type="submit">Submit</button>
            </div>
        </form>
    </div>
</div>

下面是我的验证程序代码：

    $('#form-01, #form-02, #form-03, #form-04').each(function() {
    $(this).validate({
        rules: {
            FromEmail: {
                required: true,
                email: true,
                maxlength: 128
            },
            ToEmail: {
                required: true,
                email: true,
                maxlength: 128
            },
            Message: {
                required: true,
                maxlength: 512,
                badCharRegex: /^[^\<\>&#]+$/i
            }
        },
        messages: {
            FromEmail: {
                required: "Please enter a valid email address.",
                maxlength: "Please try to keep your email address to 128 characters or less."
            },
            ToEmail: {
                required: "Please enter a valid email address.",
                maxlength: "Please try to keep your email address to 128 characters or less."
            },
            Message: {
                required: "Please tell us what's on your mind.",
                maxlength: "Please try to keep your messages to 512 characters or less.",
                badCharRegex: "The following characters are not permitted in this form.  ( > < & # )  Please remove before submitting."
            },
        },
        submitHandler: function(form) {
            var request;
            // Abort any pending request.
            if (request) request.abort();
            var $inputs = $(form).find("input, select, textarea, button");
            var serializedData = $(form).serialize();
            // Disable the inputs for the duration of the ajax request.
            $inputs.prop("disabled", true);
            request = $.ajax({
                url: "/somefolder/ajax.php",
                cache: false,
                type: "post",
                data: serializedData
            });
            // Called on success.
            request.done(function(msg) {
                console.log(msg);
                if(msg == "1") {
                    /* insert success message back into form html */
                } else {
                    /* insert fail message back into form html */
                }
            });
            // Called on failure.
            request.fail(function (jqXHR, textStatus, errorThrown){
                // log the error to the console
                $("div:first", this).html("The following error occured: " + textStatus, errorThrown);
            });
            // Called if the request failed or succeeded.
            request.always(function () {
                // reenable the inputs
                setTimeout(function() {
                    $inputs.prop("disabled", false);
                }, 2000);
            });
            // Prevent default posting of form.
            return false;
        }
    });
});

目前 post 表单失败仅仅是因为我还没有创建 ajax.php 模板及其所有代码，但我正在尝试捕获该错误消息并将其显示在 HTML 的形式。

这是我一直想弄清楚的一点：

$("div:first", this).html("The following error occured: " + textStatus, errorThrown);

我在上面一行中 post 编辑的代码不起作用，我对这些东西束手无策，所以我该如何使用 $(this)。选择器，它实际上是 "form-04" 的 id 并告诉它向下移动一个子级到应该显示状态的 div 以便我可以插入一点动态 html 文本？

Answer 1

这对我来说还没有多大意义，但解决方案原来是改变这个：

$("div:first", this).html("The following error occured: " + textStatus, errorThrown);

对此：

$(form).find('[name="form-status"]').html("The following error occured: " + textStatus, errorThrown);

我猜我的 javascript 顶部的 $(this).validator 代码最终实际上包含表单标签以及其中的所有其他 html。只是希望他们是一种将其视为调试输出的简单方法。

如何找到 html 并将其定向回 $(this) 的子项。使用 JQuery 验证器

How to find and direct html back into the child of $(this). using JQuery Validator

javascript

jquery

this

jquery-validate