3

私は jquery の検証にまったく慣れていないので、簡単なテーマであなたの助けが必要です。

動的テーブルを検証しています。このテーブルには、行を追加するボタンがあります。フィールドの 1 つはパーセンテージで、すべての行のパーセンテージの合計が 100% であるかどうかを検証しています。しかし、パーセンテージ フィールドにエラー メッセージや無効なクラスを添付することはできません。グループについて読みましたが、行数がわからないため、「動的」グループを作成する方法を管理できません。行フィールドには、Percentage[0]、Percentage[1] などの名前と、.NET MVC3 によって生成された ID があります。

お願いです、これで手を貸してくれませんか？どこかで有用な情報をスキップしていると確信しています...誰かが私を正しい方法で配置できますか?

よろしくお願いします。

よろしく。

編集：

はい、すみません。これが私のコードです：

現時点では、必要なすべてのフィールドを取得するためにクラス検証を使用していますが、現在、div にエラーを表示できません。エラーを 1 つだけ表示したいのですが、すべてのパーセンテージ フィールドを一度に検証します。

    <script type="text/javascript">

$.validator.addMethod("checksum", function (value, element, params) {
    var sum = 0;
    $(params.elements).each(function (i, e) {
        sum = sum + parseInt($(e).val());
    });

    return sum == params.total;
}, $.format("The percentage fields must equal {1} "));

$.validator.addClassRules({ totalize: { checksum: { elements: ".totalize", total: 100}} });

$("#myform").validate({ errorPlacement: function (error, element) { 
    if (element.hasClass("totalize")) {
        error.appendTo("#errors") 
    } else {
        error.insertAfter(element);
    }
});

$(function () {

    var $clone = $('<tr><td><input type="text" value="" name="Person[].Name"></td><td><input type="text" value="" name="Person[].Percentage" class="totalize"></td></tr>');

    $("#AddPerson").on("click", function () {
        $clone.clone().appendTo("#people");
    });
});

</script>

<div class="percentages">

    <table class="">
        <caption>
            Percentages
        </caption>
        <thead>
            <tr>
                <th>
                    Name
                </th>

                <th>
                    <button id="AddPerson" type="button">Add</button>
                </th>
            </tr>
        </thead>
        <tbody id="people">
            <tr>
                <td>
                    <input type="text" value="" name="Person[].Name">
                </td>
                <td>
                    <input type="text" value="" name="Person[].Percentage" class="totalize">
                </td>   
            </tr>
        </tbody>
    </table>

    <div id="errors"> 
    </div>

</div>
4

1 に答える 1

1

フォームに入力を動的に追加する場合は、ルールを使用する必要があります。フォームで validate() を呼び出していることを確認してください (コードに id="myForm" のフォーム タグがありませんでした)。また、いくつかの「改善」を追加しました。 jsFiddle を確認してください。または、次のコードを確認します。

/*I used an array instead of object literal in order to format your message.  The object literal hasn't working */
$.validator.addMethod("checksum", function (value, element, params) {
    var sum = 0;
    $(params[0]).each(function (i, e) {
        ///specify radix 10 and use || incase the value is empty
        sum += parseInt($(e).val(), 10) || 0;
    });
    return sum == params[1];
}, $.validator.format("The percentage fields must equal {1}"));
var totalize = {
    checksum: [".totalize", 100]
};
$.validator.addClassRules("totalize", totalize);
var valSettings = {
    onkeyup: true,
    errorPlacement: function (error, element) {
        if (element.hasClass("totalize")) {
            error.appendTo("#errors");
        } else {
            error.insertAfter(element);
        }
    },
    submitHandler: function (form) {
        form.submit();
    }
};


$(function () {

    $("#myForm").validate(valSettings);
    var $clone = $('<tr><td><input type="text" value="" name="Person[].Name"></td><td><input type="text" value="" name="Person[].Percentage" class="checksum totalize"></td></tr>');

    $("#AddPerson").on("click", function () {
        $clone.clone()
            .appendTo("#people")
            .find("input[name='Person[].Percentage']")
            .rules("add", totalize);
    });
});
于 2013-06-11T14:41:44.227 に答える