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（残りはかなりのマークアップであるため、これは単なるライトボックスです）：

<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"

広く使用されているトリックの1つは、代わりにポジショニングを使用してフィールドを非表示にすることです。

CSS：

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

しかし、あなたの場合、問題は、フォームフィールドがライトボックス内にあり、フォームが送信される前に（明らかに）閉じられていることです。これは機能しません。フォームの送信中はライトボックスを開いたままにするか、ライトボックスを閉じたらJavaScriptを使用してフォームの内容を自分で抽出する必要があります。

フォームが投稿されるまで、ライトボックスを開いたままにしておくことを選択するでしょう）。

于 2012-10-15T21:19:34.943 に答える