1. ホーム
  2. 質問と答え
  3. Jqueryで動的に追加されたdiv子要素を検証する方法は？

Jqueryで動的に追加されたdiv子要素を検証する方法は？

2017-03-08 18 views
0

私は1つのHTML DIVを作成しています。input、img、textarea、radio、checkbox、dropdownなどの要素を持っています。これらの要素はdivに動的にバインドされています。時折、DIVは1つの要素（入力テキスト）を持つことがあり、複数の要素を持つことがあります。これらの要素はサーバーから来ており、メインのDIVにバインドしています。 提出中にDIV要素の値が追加されたかどうかを検証する必要があります。 すべてのHTML要素に対してif elseブロックで個別に検証する必要はありません。 DIV子要素の値が追加されたかどうかを検証する方法はありますか？ シナリオ：1つのセクション（これはメインDIVです）、そのセクションにいくつかの質問があります（これはサブDIVのような子要素です）、各セクションには生徒が5 10の質問があるので、彼が答えた質問の数を確認する必要があります。Jqueryで動的に追加されたdiv子要素を検証する方法は？

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
</head> 
<body> 
    <div class="subSectionDiv template"> 
     <div class="ui-widget"> 
      <div class="form-group"> 
       <label for="Section_1_SubSection_0">1</label> 
       <div class="inner-addonAutoFill right-addon"> 
        <img class="autoFillIcon autoFillCls" id="autoFill_Section_1_SubSection_0" onclick="autoFillOtions(id)" src="img/autoFill.png"> 
        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"> 
         <input class="1_Section_1_SubSection_0_2340 form-control" id="Section_1_SubSection_0" maxlength="15" onblur="hideErrorMessage(this.id)" oninput="maxLengthCheck(this)" type="text"> 
        </div> 
       </div> 
       <div class="subSectionDecDiv"> 
        <p class="subSectionDescP">1 Desc</p> 
       </div> 
       <p class="validationP Section_1_SubSection_0"></p> 
      </div> 
     </div> 
     <div class="form-group"> 
      <label for="Section_1_SubSection_1">2</label> 
      <div class="ui-select"> 
       <div aria-disabled="false" class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-corner-all ui-shadow ui-btn-active" id="Section_1_SubSection_1-button"> 
        <span class="form-control mobile-selectmenu-disabled">1</span><select class="form-control" id="Section_1_SubSection_1" onchange="hideErrorMessage(this.id)"> 
         <option value="1"> 
          1 
         </option> 
         <option value="2"> 
          2 
         </option> 
         <option value="3"> 
          3 
         </option> 
         <option value="4"> 
          4 
         </option> 
        </select> 
       </div> 
      </div> 
      <div class="subSectionDecDiv"> 
       <p class="subSectionDescP">2 Desc</p> 
      </div> 
      <p class="validationP Section_1_SubSection_1"></p> 
     </div> 
     <div class="form-group"> 
      <label for="Section_1_SubSection_2">3</label> 
      <div class="ui-checkbox"> 
       <label class="checkbox-inline ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-on" onclick="clickOnCheckboxLabel(this);">1</label><input checked="checked" id="ck_1" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="1"> 
      </div> 
      <div class="ui-checkbox"> 
       <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">2</label><input id="ck_2" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="2"> 
      </div> 
      <div class="ui-checkbox"> 
       <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">3</label><input id="ck_3" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="3"> 
      </div> 
      <div class="ui-checkbox"> 
       <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">4</label><input id="ck_4" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="4"> 
      </div> 
      <div class="ui-checkbox"> 
       <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">5</label><input id="ck_5" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="5"> 
      </div> 
      <div class="ui-checkbox"> 
       <label class="checkbox-inline ui-checkbox-off ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left" onclick="clickOnCheckboxLabel(this);">6</label><input id="ck_6" name="Section_1_SubSection_2" onchange="hideErrorMessage(this.name)" onclick="checkReadOnlyCheckBox(this);" type="checkbox" value="6"> 
      </div> 
      <div class="subSectionDecDiv"> 
       <p class="subSectionDescP">3 Desc</p> 
      </div> 
      <p class="validationP Section_1_SubSection_2"></p> 
     </div> 
     <div class="imgUpldDiv"> 
      <span class="label">4</span> <span></span> 
      <div id="syncDiv"> 
       <span><button class="btn btn-primary ui-btn ui-shadow ui-corner-all" id="Section_1_SubSection_3" onclick="addCandidatePhoto(id);" type="button"><span><span class="glyphicon glyphicon-plus btnGlycophin" hidden="true" style="vertical-align:middle"></span> Upload Img</span><input class="imageFileName Section_1_SubSection_3" type="hidden" value="1488948216078.jpg"></button></span> 
      </div><span class="imagePreview Section_1_SubSection_3"><img alt="img" class="img-responsive imgSmall" src="file:/storage/emulated/0/DCIM/Camera/1488948216078.jpg" style="margin-right:5px"><span class="glyphicon glyphicon-remove savedImageRemover Section_1_SubSection_3 1488948216078" id="Section_1_SubSection_3&amp;file:/storage/emulated/0/DCIM/Camera/1488948216078.jpg" onclick="removeSavedPhoto(id)"></span></span> 
      <div class="subSectionDecDiv" style="display: block;"> 
       <p class="subSectionDescP">4 Desc</p> 
      </div> 
      <p class="validationP Section_1_SubSection_3" id="imageErrorSection_1_SubSection_3" style="display: block;"></p> 
     </div> 
    </div> 
</body> 
</html>

subSectionDivは、メインのDIVのクラス名と4つのdivがあるですが..私は追加された1つの気象要素の値によってそれらを1つずつ検証するために持っているか、いない フォーム検証を作成してくれ

出典

2017-03-08 Mallikarjun Hampannavar

+0

を助けてください、いくつかそこにいくつかのjqueryの1つ前のhttp://www.formvalidator.net/ –

+0

あなたは、送信ボタンを押すと、すべてのフィールド（ダイナミック要素）の検証を含む1つの関数を呼び出す必要があります。 – iyyappan

+0

フォームを作成し、 タイプの要素のすべてで、簡単な入力検証を使用できます。 nオプションをHTML5で使用するか、正規表現を使用します。非要素の残りの部分については、jQueryを使用してDOM内で行われている処理がすべてOKであることを確認します。 – Lys

答えて

0 
I have a hack for this. 
Add a class (eg:form-elements) to all the inputs,selectbox,textarea and others which you want to validate and try the code below : 

$('.form_elements').each(function(){ 
     if($(this).attr('type')=='checkbox'){ 
      if($(this).prop('checked')){ 
       //do something 
      } 
     }else if($(this).attr('type')=='text'){ 
      if($(this).val()==''){ 
       //do something 
      } 
     }else if($(this).attr('type')==undefined){ 
      if($(this).prop('tagName').toLowerCase()=='select'){ 
       if($(this).val()==''){ 
       //do something 
       } 
      } 
     } 
    }); 

you can use this code to validate all the fields in you page. The validation may vary for some tag and if you want validation for any fields kindly make a request. 

Hope this is useful

出典

2017-03-08 11:00:34 Ram

関連する問題

 関連する問題