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;
        }
    });
});

我的表格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>

表格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进行验证，并且类别和子类别具有相同的ID（cat），我认为验证应该适用于两个字段，但事实并非如此。

子类别下拉字段将隐藏，直到用户首先选择类别。也许这与它有关？有什么想法吗？

Answer 1

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

来自JQuery文档：

每个id值只能在文档中使用一次。如果为多个元素分配了相同的ID，则使用该ID的查询将仅选择DOM中的第一个匹配元素。但是，不应依赖此行为;使用相同ID的多个元素的文档无效。

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

Answer 2

如果您正在使用Jquery使用元素，那么您需要具有ID或Class或tagName。如果两个元素具有相同的id，那么您可以执行类似这样的操作

＆＃13;

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

＆＃13;

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

＆＃13;

隐藏子类别字段上的jquery表单验证

2 个答案: