2017-03-08 5 views
0

私は控えめな検証でAsp.Net Core MVCを使用しています。子コレクションの入力要素を動的に追加できるフォームがあり、これをクライアント側の検証に含める必要があります。たとえば、これまでのソリューションのいくつかを見てきました。 Adding jQuery validator rules to dynamically created elements in ASPですが、依然としてクライアントの検証は行われません。子コレクションの動的に追加された入力要素の妥当性確認

ここに私のコードです。最初に、htmlブロックがクローンされ、ボタンがクリックされるとフォームリストに追加されます。クローニングされたリスト項目要素の

<li class="newVideoRow well-sm"> 
    <div> 
     <input type="hidden" name="Videos.Index" value="#" /> 
     <label>Video Title:</label> 
     <input name="Videos[#].VideoTitle" class="videoTitle form-control inline" placeholder="Enter a short title for this video" value="" /> 
    </div> 
    <div> 
     <label>Video Link:</label> 
     <input name="Videos[#].VideoUri" type="url" class="videoUri form-control inline" value="http://" /> 
    </div> 
</li> 

のjQueryは、次に、[#]のインデックスを操作検証属性を追加し、おそらく控えめなバリデータを再解析します。私は、追加入力が空白と提出のままにした場合

 $('#addNewVideo').click(function(){ 
      var nr = $('.newVideoRow').clone(); 
      nr.removeClass('newVideoRow').addClass('videoRow'); 
      var index = (new Date).getTime(); 
      $(nr).find('div input').each(function(divIndex, divElement){ 
       $(divElement).attr('name', $(divElement).attr('name').replace('#', index)); 
       var inputName = $(divElement).attr('name'); 
       if ($(divElement).attr('type') != 'hidden'){ 
        $(divElement).attr('data-val', 'true'); 
        $(divElement).attr('data-val-required', 'A value is required'); 
        $(divElement).after('<span asp-validation-for="' + inputName + '" data-valmsg-replace="true" class="text-danger field-validation-valid"></span>'); 

        $('form').removeData('validator').removeData('unobtrusiveValidation'); 
        //Parse the form again 
        $.validator.unobtrusive.parse($('form')); 
       } 
       $(divElement).val($(divElement).val().replace('#', index)); 
      }); 
      $('#videoList').append(nr); 
     }); 

     $('form').submit(function(e){ 
      saveSubmitValues(); // copies some other values to hidden fields 
     }); 

は、HTML5のURLタイプの入力がエラーを検出したが、必要なVideoTitleフィールドには、エラーが表示されません。誰かが私が間違っている場所を検出したり解決策を提案したりすることはできますか?

答えて

1

動作しない理由は2つあります。
1. data-valmsg-forではなく、タグヘルパーでサーバ側で行われているasp-validation-forを使用しています。
2.の後に$.validator.unobtrusive.parse()を呼び出して、クローンされた要素をDOMに追加する必要があります。

コードを使用した実例があります。 https://codepen.io/judowalker/pen/QgRybW

関連する問題