6

私はショーの検証に MVC3 モデルの Validation と Unobtrusive を使用し、要素と検証を複製する方法を見つけようとしています。

これは私のビューコードです:

<div id="d1" class="Addable">
@Html.EditorFor(model => model.CellPhone)
@Html.ValidationMessageFor(model => model.CellPhone)
</div>
<input type"button" class="AddE" />

HTML Dom は次のとおりです。

<div class="Addable" id="d1">
  <input type="text" value="" name="CellPhone" id="CellPhone" data-val-required="Req."
   data-val-regex-pattern="^04[1234][0-9]{6}$" data-val-regex="notValid" data-val="true"
   class="text-box single-line valid">

 <span data-valmsg-replace="true" data-valmsg-for="CellPhone" 
  class="invalid-side-note field-validation-valid"></span>
</div>

そこで、次のスクリプトを使用して、配列名などの名前を変更して新しいスクリプトを複製します。

//Add new Addable div
$('.AddNewE').click(function () {

    var Target = $('.Addable:first');
    var TargetId = $(Target).attr('id');
    var Count = $('.Addable#' + TargetId).size();
    var CloneTarget = $(Target).clone();
    CloneTarget.find('input').val('');
    CloneTarget.insertAfter('.Addable:last');
    var TargetName = $(Target).find('input').attr('name');

    if (Count == 1) {

        var CloneName = TargetName + '[1]';
        TargetName = TargetName + '[0]';

        $(Target).find('input').attr('name', TargetName);
        $(Target).find('span[class|="field-validation"]').attr('data-valmsg-for', TargetName);

        $(CloneTarget).find('input').attr('name', CloneName);
        $(CloneTarget).find('span[class|="field-validation"]').attr('data-valmsg-for', CloneName);

    } else {

        var indx = TargetName.length - 3;
        var CloneTargetName = TargetName.substring(0, indx);
        CloneTargetName = CloneTargetName + '[' + Count + ']';
        $(CloneTarget).find('input').attr('name', CloneTargetName);
        $(CloneTarget).find('span[class|="field-validation"]').attr('data-valmsg-for', CloneTargetName);
    }

});

最初のクローンの後、Dom は次のようになります。

<div class="Addable" id="d1">
  <input type="text" value="" name="CellPhone[0]" id="CellPhone" data-val-required="Req."
   data-val-regex-pattern="^04[1234][0-9]{6}$" data-val-regex="notValid" data-val="true"
   class="text-box single-line valid">

 <span data-valmsg-replace="true" data-valmsg-for="CellPhone[0]" 
  class="invalid-side-note field-validation-valid"></span>
</div>


<div class="Addable" id="d1">
  <input type="text" value="" name="CellPhone[1]" id="CellPhone" data-val-required="Req."
   data-val-regex-pattern="^04[1234][0-9]{6}$" data-val-regex="notValid" data-val="true"
   class="text-box single-line valid">

 <span data-valmsg-replace="true" data-valmsg-for="CellPhone[1]" 
  class="invalid-side-note field-validation-valid"></span>
</div>

すべての入力には独自の検証があるため、検証スパンと入力の両方を変更します。しかし、クローンの後、検証はまったく機能しませんでした。問題はどこだ？あなたの提案は何ですか？

4

1 に答える 1

11

この行は私を助けます：

        $('form').removeData('validator');
        $('form').removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse('form');
于 2012-05-08T12:06:33.407 に答える