Проверка правильности формы jQuery на скрытой подкатегории

Question

Мне нужна проверка jquery в форме, которая имеет заголовок, категорию, подкатегорию и поля сообщений. Я смог получить подтверждение на все, кроме подкатегории. По какой-то причине я просто не могу заставить его работать. Надеюсь, кто-то здесь поможет мне.

Код проверки:

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    var adForm = jQuery("#Add_post_form"); 
    var cc_title = jQuery("#title"); 
    var cc_desc = jQuery("#cc_desc"); 
    var cc_desc_error = jQuery(".desc_error"); 
    var cat = jQuery("#cat"); 
    var cat_error = jQuery(".category_error"); 
    function validate_title(){ 
     if(cc_title.val() == ''){ 
      cc_title.addClass("error"); 
      cc_title.attr("placeholder", "<?php echo ENTER_TITLE; ?>"); 
      cc_title.css('border', 'solid 1px red'); 
      cc_title.css('background-color', '#ffece8'); 
      return false; 
     }else{ 
      cc_title.removeClass("error"); 
      cc_title.css('border', 'none'); 
      cc_title.css('background-color', ''); 
      return true; 
     } 
    } 
    cc_title.blur(validate_title); 
    cc_title.keyup(validate_title); 
    function validate_desc(){ 
     if(cc_desc.val() == ""){ 
      cc_desc.addClass("error"); 
      cc_desc.css('border', 'solid 1px red'); 
      cc_desc_error.addClass("error"); 
      cc_desc_error.text("<?php echo ENTER_DES; ?>"); 
      return false; 
     }else{ 
      cc_desc.removeClass("error"); 
      cc_desc_error.removeClass("error"); 
      cc_desc_error.text(""); 
      cc_desc.css('border', 'none'); 
      return true; 
     } 
    } 
    cc_desc.blur(validate_desc); 
    cc_desc.keyup(validate_desc); 
    function validate_category(){ 
     if(cat.val() == '-1'){ 
      cat.addClass("error"); 
      cat.css('border', 'solid 1px red'); 
      cat_error.addClass("error"); 
      cat_error.text("<?php echo ENTER_CAT; ?>"); 
      return false; 
     }else{ 
      cat.removeClass("error"); 
      cat_error.removeClass("error"); 
      cat_error.text(""); 
      cat.css('border', 'none'); 
      return true; 
     } 
    } 
    cat.blur(validate_category); 
    cat.keyup(validate_category); 

    adForm.submit(function() 
    { 
     if(validate_title() & validate_desc() & validate_category()) 
     { 
      return true; 
     } 
     else 
     { 
      return false; 
     } 
    }); 
}); 

Моя форма ЯШ:

<script type="text/javascript"> 
    function displaychk_frm(){ 
     dom = document.forms['add_post_form']; 
     chk = dom.elements['category[]']; 
     len = dom.elements['category[]'].length; 

     if(document.getElementById('selectall').checked == true) { 
      for (i = 0; i < len; i++) 
       chk[i].checked = true ; 
     } else { 
      for (i = 0; i < len; i++) 
       chk[i].checked = false ; 
     } 
    } 
</script> 

Форма HTLM:

<form name="add_post_form" id="Add_post_form" action="" method="post" enctype="multipart/form-data"> 
<!--Start Step1--> 
<div class="step1"> 
    <div class="label"> 
     <label><?php echo AD_TTLE; ?></label> 
    </div> 
    <div class="row"> 
     <input type="text" name="cc_title" maxlength="40" id="title"/> 
    </div> 
    <div class="label"> 
     <label><?php echo SLT_CAT; ?></label> 
    </div> 
    <div class="row"> 
     <div id="ad-categories">      
      <div id="catlvl0"> 
       <?php 
       wp_dropdown_categories('show_option_none=' . __('Selecteer categorie', 'appthemes') . '&class=dropdownlist&orderby=name&order=ASC&hide_empty=0&hierarchical=1&taxonomy=' . CUSTOM_CAT_TYPE . '&depth=1'); 
       ?> 
       <div style="clear:both;"></div> 
      </div> 
     </div>  
     <div id="ad-categories-footer">    
      <div id="chosenCategory"><input id="cat" name="cc_category" type="hidden" value="-1" /> 

</div> 
      <div style="clear:both;"></div> 
     </div> 
    </div> 
    <div class="label"> 
     <label for="cc_desc"><?php echo DESC; ?></label> 
    </div> 
    <div class="row"> 
     <textarea name="cc_description" id="cc_desc"></textarea>   
       </div>        
</div> 
<input class="submit" type="submit" name="step1" value="NEXT"/> 

Поскольку я проверяю по ID, и как категория, так и подкатегория имеют один и тот же идентификатор (cat), я бы предположил, что проверка должна работать над обоими полями, но это не так.

Поле выпадающего списка подкатегорий скрыто до тех пор, пока пользователь не выберет категорию в первую очередь. Может быть, это как-то связано с этим? Есть идеи?

Answer 1

Не используйте один и тот же идентификатор для разных элементов.

Из документов JQuery:

Каждое значение идентификатор должен быть использован только один раз в документе. Если нескольким элементам был присвоен одинаковый идентификатор, запросы, которые используют этот идентификатор, будут выбирать только первый согласованный элемент в DOM. Однако это поведение нельзя полагаться; документ с более чем одним элементом, использующим один и тот же идентификатор, является недопустимым.

https://api.jquery.com/id-selector/

Answer 2

Если вы играете с элементами с Jquery, то вам необходимо иметь удостоверение личности или класса или тэгу. Если два элемента имеют тот же идентификатор, то вы можете сделать что-то вроде этого

$(document).ready(function() { 
 
    alert($("select:eq(0)").find("option:eq(0)").html()); 
 
    alert($("select:eq(1)").find("option:eq(0)").html()); 
 

 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<select id="cat"> 
 
    <option>Item1 
 
    <option> 
 
</select> 
 

 

 
<select id="cat"> 
 
    <option>SubItem1 
 
    <option> 
 
</select>