添加 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);

添加 dom 后的表达注释重新绑定形式

Expressive annotation rebind form after adding dom

c#

asp.net-mvc

jquery

unobtrusive-validation

expressiveannotations