2

我有一个灯箱，其中包含一堆输入元素，我使用 HTML 帮助器为创建操作设置了这些输入元素。它们是可选字段，但我确实在 jquery 验证中对它们应用了数字规则。

用户可以打开此灯箱，并根据需要填写字段，但不是必需的。它与其余数据的形式相同，但要提交，他们必须关闭此灯箱。

在提交时，不是来自灯箱的值被发布到控制器。如果我从灯箱中删除输入，它工作正常。它一定与它被隐藏有关，但为什么会发生这种情况呢？是jquery吗？我有 'voavi-ignore' 作为我的忽略类，所以它仍然应该验证这些。由于我已经有一段时间了，所以我对此感到有些困惑和精疲力尽。我页面上的其他所有内容都可以正常工作，我只是将这些新字段添加到灯箱中。

js：

$(document).ready(function () {
    InitTab();
    $("#caseProductions").hide();
    $(".chzn-select").chosen();
    $(".filetypes").click(OnNewVOAVIClick);
    $(".countPerCase").change(OnCaseProdChange);
    $(".caseCount").change(OnCaseProdChange);
    $(".drinkWindow").change(OnDrinkWindowChange);
    $("#lnkCaseProduction").click(OnCaseProdOpen);

    VintageUpAlert();

    $.validator.addMethod("decimalNumber", function (value, element) {
        return this.optional(element) || (!isNaN(value));
    }, "Must be a valid number");

    wineValidator = $("form").validate({
        errorPlacement: function (error, element) {
            var x = element.parent();
            error.appendTo(element.closest("td"));
        },
        ignore: ".voavignore",
        rules: {
            "Wine.VarTypeID": { min: 1 },
            "Wine.OriginID": { min: 1 },
            "Wine.AppID": { min: 1 },
            "Wine.VintageID": { min: 1 },
            "VOAVIRequest.VarType": { required: true },
            "VOAVIRequest.Origin": { required: true },
            "VOAVIRequest.App": { required: true },
            "VOAVIRequest.Vintage": { required: true },
            "Wine.CaseProduction": { digits: true },
            "Wine.AlcoholContent": { number: true,
                min: 0, max: 100
            },
            "Wine.pH": { number: true,
                min: 0, max: 7
            },
            "Wine.RS": { decimalNumber: true,
                min: 0, max: 1000
            }
        },
        messages: {
            "Wine.VarTypeID": { min: "Varietal/Type Required" },
            "Wine.OriginID": { min: "Origin Required" },
            "Wine.AppID": { min: "Appellation Required" },
            "Wine.VintageID": { min: "Vintage Required" },
            "VOAVIRequest.VarType": { required: "Varietal/Type Required" },
            "VOAVIRequest.Origin": { required: "Origin Required" },
            "VOAVIRequest.App": { required: "Appellation Required" },
            "VOAVIRequest.Vintage": { required: "Vintage Required" },
            "Wine.CaseProduction": { digits: "Please enter whole numbers only" }
        }
    });

    CaseProdValidation();
});

function CaseProdValidation() {
    $(".caseCount").rules("add", { digits: true });
}

html （这只是 lightbox 其余的相当多的标记）：

<div class="lightbox" id="caseProductions">
    <a href="#" class="ui-icon ui-icon-circle-close closer"></a>
    <table>
        <thead>
            <tr>
                <td>
                    <h4>
                        Format</h4>
                </td>
                <td>
                    <h4>
                        Cases</h4>
                </td>
                <td>
                    <h4>
                        Bottles/Case</h4>
                </td>
                <td>
                    <h4>
                        Total Bottles</h4>
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc187ml)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc187ml, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc187ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 24), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc375ml)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc375ml, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc375ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc500ml)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc500ml, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc500ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc750ml)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc750ml, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc750ml, new SelectList(Model.BottlesPerCase, "Key", "Value", 12), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc1p5L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc1p5L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc1p5L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc3L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc3L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc3L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc5L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc5L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc5L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc6L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc6L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc6L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc9L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc9L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc9L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc12L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc12L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc12L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc15L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc15L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc15L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc18L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc18L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc18L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.cc27L)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cc27L, new { @class = "caseCount" })
                </td>
                <td>@Html.DropDownListFor(m => m.Wine.cpc27L, new SelectList(Model.BottlesPerCase, "Key", "Value", 1), new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
            <tr>
                <td>@Html.LabelFor(m => m.Wine.ccOther)
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.ccOther, new { @class = "caseCount" })
                </td>
                <td>@Html.TextBoxFor(m => m.Wine.cpcOther, new { @class = "countPerCase" })
                </td>
                <td class="totalBottleCalc">
                </td>
            </tr>
        </tbody>
    </table>
    <div style="display: inline-block">
    <input type="button" value="Save" />
    </div>
</div>
4

1 回答 1

5

实际上是浏览器决定display:none不应该发布字段（除了type="hidden"那些永远不会显示的字段）。

一种广泛使用的技巧是使用定位来隐藏字段：

CSS：

input.hideThisField {
  position:absolute;
  top: -9999px;
  visibility:hidden;
}

但在您的情况下，问题在于您的表单字段位于您的灯箱内，在提交表单之前（显然）已关闭。这行不通。您将不得不在表单提交时保持灯箱打开，或者在灯箱关闭后自己使用 JavaScript 提取表单内容。

我可能会选择简单地保持灯箱打开，直到表格发布）。

于 2012-10-15T21:19:34.943 回答