添加dom后的富有表現力的注釋重新綁定形式

Question

我在包含列表對象的表單上使用表達性注釋。 第一次加載，一切正常。

有一個按鈕，允許在此列表上添加對象。 為了添加該對象，我用從服務器端渲染的局部視圖替換了表單的一部分。

視圖是確定的，並且以前的對象驗證工作正常。 但是添加的一個無效。

這是我在局部視圖中加載的JavaScript代碼

$(document).ready(function () {
    $('[data-toggle="popover"]').popover();

    var validator = $('#controlReportForm').data('validator');
    //Settings to validate hiddend fileds (Required for know how validation)
    validator.settings.ignore = "";
    validator.settings.onkeyup = function (element) { // execute validation of current field on keyup event
        $(element).valid();
    };
});

這是第一次加載時生成的html

<div class="row action">
            <input id="ListActionsCo_0__Type" name="ListActionsCo[0].Type" type="hidden" value="CO" class="ea-triggers-bound">
            <input data-val="true" data-val-number="The field Order must be a number." data-val-required="The Order field is required." id="ListActionsCo_0__Order" name="ListActionsCo[0].Order" type="hidden" value="0" class="ea-triggers-bound">
            <div class="col-md-8">
                <textarea class="form-control ea-triggers-bound valid" cols="20" data-val="true" data-val-requiredif="- Le champ \&quot;Identification de la non conformité\&quot; est obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression="&quot;Type == 'DP'&quot;" data-val-requiredif-fieldsmap="{&quot;Type&quot;:&quot;string&quot;}" id="ListActionsCo_0__Texte" name="ListActionsCo[0].Texte" rows="2" aria-describedby="ListActionsCo_0__Texte-error" aria-invalid="false">co co co</textarea>              
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-6">
                        Responsable
                    </div>
                    <div class="col-md-6">
                       <input class="form-control ea-triggers-bound" data-val="true" data-val-requiredif="Champ obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression="&quot;Texte != null &amp;&amp; (Type == 'CU' || Type == 'CO' || Type == 'PR' || Type == 'VE')&quot;" data-val-requiredif-fieldsmap="{&quot;Texte&quot;:&quot;string&quot;,&quot;Type&quot;:&quot;string&quot;}" id="ListActionsCo_0__Responsable" name="ListActionsCo[0].Responsable" type="text" value="respco">
                       <span class="field-validation-valid" data-valmsg-for="ListActionsCo[0].Responsable" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                         Date de réalisation
                    </div>
                    <div class="col-md-6">
                       <div class="input-group date">
                          <input class="form-control ea-triggers-bound" data-val="true" data-val-date="The field DtVal must be a date." data-val-requiredif="Champ obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression="&quot;Texte != null &amp;&amp; (Type == 'CU' || Type == 'CO' || Type == 'PR' || Type == 'VE')&quot;" data-val-requiredif-fieldsmap="{&quot;Texte&quot;:&quot;string&quot;,&quot;Type&quot;:&quot;string&quot;}" id="ListActionsCo_0__DtVal" name="ListActionsCo[0].DtVal" type="text" value="13/06/2017">
                              <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar">
                                </span>
                              </span>
                        </div>
                        <span class="field-validation-valid" data-valmsg-for="ListActionsCo[0].DtVal" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>
        </div>

這是添加對象時產生的html

  <div class="row action">
            <input id="ListActionsCo_1__Type" name="ListActionsCo[1].Type" type="hidden" value="CO" class="ea-triggers-bound">
            <input data-val="true" data-val-number="The field Order must be a number." data-val-required="The Order field is required." id="ListActionsCo_1__Order" name="ListActionsCo[1].Order" type="hidden" value="0" class="ea-triggers-bound">
            <div class="col-md-8">
               <textarea class="form-control ea-triggers-bound" cols="20" data-val="true" data-val-requiredif="- Le champ \&quot;Identification de la non conformité\&quot; est obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression="&quot;Type == 'DP'&quot;" data-val-requiredif-fieldsmap="{&quot;Type&quot;:&quot;string&quot;}" id="ListActionsCo_1__Texte" name="ListActionsCo[1].Texte" rows="2"></textarea>
            </div>
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-6">
                        Responsable
                    </div>
                    <div class="col-md-6">
                        <input class="form-control ea-triggers-bound" data-val="true" data-val-requiredif="Champ obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression="&quot;Texte != null &amp;&amp; (Type == 'CU' || Type == 'CO' || Type == 'PR' || Type == 'VE')&quot;" data-val-requiredif-fieldsmap="{&quot;Texte&quot;:&quot;string&quot;,&quot;Type&quot;:&quot;string&quot;}" id="ListActionsCo_1__Responsable" name="ListActionsCo[1].Responsable" type="text" value="">  
                         <span class="field-validation-valid" data-valmsg-for="ListActionsCo[1].Responsable" data-valmsg-replace="true"></span>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        Date de réalisation
                    </div>
                    <div class="col-md-6">
                       <div class="input-group date">
                          <input class="form-control ea-triggers-bound" data-val="true" data-val-date="The field DtVal must be a date." data-val-requiredif="Champ obligatoire" data-val-requiredif-allowempty="false" data-val-requiredif-expression="&quot;Texte != null &amp;&amp; (Type == 'CU' || Type == 'CO' || Type == 'PR' || Type == 'VE')&quot;" data-val-requiredif-fieldsmap="{&quot;Texte&quot;:&quot;string&quot;,&quot;Type&quot;:&quot;string&quot;}" id="ListActionsCo_1__DtVal" name="ListActionsCo[1].DtVal" type="text" value="">
                               <span class="input-group-addon">
                                  <span class="glyphicon glyphicon-calendar"></span>
                               </span>
                        </div>
                        <span class="field-validation-valid" data-valmsg-for="ListActionsCo[1].DtVal" data-valmsg-replace="true"></span>
                    </div>
                </div>
            </div>
        </div>

我沒什么區別。 但是我想我將重新綁定dom的這一新部分以進行驗證。

我試過了

$.validator.unobtrusive.parse($('#controlReportForm'));

但是無事可做。

任何幫助，備注將有所幫助。 謝謝

Answer 1

好的，感謝@Elmer Dantas，

解決方案是在檢索dom后添加此javascript代碼

var $form = $("form");

$form.unbind();
$form.data("validator", null);

$.validator.unobtrusive.parse(document);
// Re add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);