Question

我有一个页面，其中包含一个链接，该链接将打开一个包含添加信用卡表单的窗口（通过Bootstrap）。此页面还有一个带有编辑链接的信用卡列表。单击此按钮时，将打开一个带有编辑信用卡表单的窗口（通过Bootstrap）。

对于这两种形式，在错误消息所在的表单字段上方都有一个名为“errorMsgs”的div标记。我想用相同的jquery函数验证表单。

正在发生的事情是验证适用于添加信用卡，错误消息显示在“errorMsgs”div部分中。但是，对于编辑信用卡表单，验证似乎有效，但不会显示任何消息。我怀疑该消息被添加到添加表单的“errorMsgs”div部分而不是编辑部分，因为它们位于同一页面上。

我想知道如何将其添加到您当前正在编辑的信用卡的“errorMsgs”标记中？由于客户可以存档多张信用卡，因此可能存在多个编辑信用卡表单。我以为我仍然可以使用相同的ID，但是将当前表单作为“参数”传递，以便它可以识别正确的div标签以添加消息，但我不太清楚如何做到这一点。

以下是我的代码的简化版本：

jQuery函数：

function validateCC(selector) {
    var form = $(selector);
    form.validate({
        invalidHandler: function(event, validator) {
        var errors = validator.numberOfInvalids();

            if (errors) {
                var message = '&nbsp;';
                message += '<p>Please correct the following errors:<br />';
                message += '<ul>\n';
                if (validator.errorList.length > 0) {
                    for (x=0;x<validator.errorList.length;x++) {
                        message += '<li>' + validator.errorList[x].message + '</li>\n';
                    }
                }
                message += '</ul>\n';
                message += '&nbsp;</p>\n';

                $("#errorMsgs").show();
                $("#errorMsgs").addClass("alert-error");
                $("#errorMsgs").html(message);


            } else {
                $("#errorMsgs").hide();
            }
        },
        rules: {
            customercc_ccnum: {
                minlength: 12,
                required: true
            }
        },
        messages: {
            customercc_ccnum: {
                required: "Number is required.",
                minlength: "Number should have at least 12 characters."
            }
        }
    });
}

$('.ccForm').click (function(){
    validateCC('.ccForm');
});

添加信用卡表格：

<form name="ccForm" class="ccForm" action="#myself#mcustomercc.add" method="post" id="submitCC">

<div class="row">
    <div class="span7">
        <div id="errorMsgs"></div>
    </div>
</div>

<div class="row">
    <div class="control-group">
    <div class="span2"><b>Credit Card Number:</b> <b class="mandatory">*</b></div>
    <div class="span5"> 
        <input type="text" name="customercc_ccnum" 
            size="17" 
            value=""
            placeholder="Credit Card Number"
            id="customercc_ccnum"
        >
    </div>

    </div>
</div>

<div class="row">
    <div class="span7">
        <input type="submit" name="addCC" value="Add" />
    </div>
</div>
</form>

修改信用卡表格：

<form  name="ccForm" class="ccForm" action="#myself#mcustomercc.update" method="post" id="editCC">
<div class="row">
    <div class="span7">
        <div id="errorMsgs"></div>
    </div>
</div>

<div class="row">
    <div class="control-group">
    <div class="span2"><b>Credit Card Number:</b> <b class="mandatory">*</b></div>
    <div class="span5"> 
        <div class="controls">
        <input type="text" name="customercc_ccnum" 
            size="17" 
            value="4111111111111111"
            placeholder="Credit Card Number"
            id="customercc_ccnum"
        >
        </div>
    </div>
    </div>
</div>

<div class="row">
    <div class="control-group">
    <div class="span7">
        <div class="controls">
        <input type="hidden" name="customercc_id" value="87">
        <input type="submit" name="editCC" value="Edit" />
        </div>
    </div>
    </div>
</div>
</form>

任何帮助将不胜感激！

杰森

Answer 1

您的代码......

function validateCC(selector) {
    var form = $(selector);
    form.validate({
        // your options
    });
}

$('.ccForm').click (function(){
    validateCC('.ccForm');
});

部分问题是对.validate()方法的误解。它仅用于初始化表单上的插件...不应该在每个click事件上调用它。由于插件会自动捕获click事件，因此您只需在DOM ready事件处理程序中调用.validate()即可使用您的选项初始化插件。

但是，主要问题是当您使用包含多个元素（如类）的选择器时，此插件中的方法仅附加到<em>第一个匹配的元素。（这就是为什么你看到它只适用于一个表格）。

jQuery .each()用于解决此问题。

$(document).ready(function() {      // DOM ready event

    $('.ccForm').each(function() {  // select each form
        $(this).validate({          // initialize plugin on each form
            // your options
        });
    });

});

在jquery中验证具有相同功能的多个表单

1 个答案: