隐藏子类字段的Jquery表单验证 - jquery form validation on hidden subcategory field

我需要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;
        }
    });
});

My form js:

 <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>

表单html:

<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验证，类别和子类别都有相同的ID (cat)，我认为验证应该在两个字段上工作，但它不是。

子类别下拉字段隐藏，直到用户先选择一个类别。也许和这个有关?什么好主意吗?

不要在不同的元素上使用相同的id。

从JQuery文档:

每个id值只能在文档中使用一次。如果多个元素被分配了相同的ID，那么使用该ID的查询将只选择DOM中第一个匹配的元素。然而，这种行为不应该被依赖;具有多个元素使用相同ID的文档是无效的。

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

如果你正在使用Jquery玩元素，那么你需要有ID或class或tagName。如果两个元素有相同的id那么你可以这样做

$(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>