当session下拉字段选择的文本为Admin时,jQuery validate don't触发所需条件

jQuery validate don't fire the required condition when session dropdown field selected text is Admin?

本文关键字:don validate 条件 jQuery 字段 session 选择 Admin 文本      更新时间:2023-09-26

我使用jquery验证库来验证表单。我有一个下拉的会话字段上选择这个会话的开始和结束日期填充到开始日期,结束日期和星期几文本框。我想做的是仅当会话名称不等于Admin时,才为dayofweek触发所需条件。我怎么能做到呢?请帮帮我。提前谢谢。

<table class="widefat" style="width:100%">
    <thead>
        <tr>
            <th>Title</th>
            <th>Content</th>
    </thead>
    <tbody>
        <tr>
            <td width="20%">User</td>
            <td>
                <select name="txtuser" id="txtuser" aria-required="true" aria-invalid="false" class="valid">
                <option>--select--</option>
                                    <option value="2">nitinjohnson2000</option>
                                </select>
            </td>
        </tr>
        <tr>
            <td width="20%">Sessions</td>
            <td>
                <select name="txtsession" id="txtsession" aria-required="true" aria-invalid="false" class="valid">
                <option>--select--</option>
                                    <option value="14">Fall 2015 - Anderson Elementary Chess Program - Frisco ISD</option>
                                    <option value="15">Fall 2015 - Ashley Elementary Chess Program - Frisco ISD</option>
                                    <option value="16">Fall 2015 - Bethany Elementary Chess Program - Plano ISD</option>
                                    <option value="17">Fall 2015 - Bledsoe Elementary Chess Program - Frisco ISD</option>
                                    <option value="18">Fall 2015 - Borchardt Elementary Chess Program - Frisco ISD</option>
                                    <option value="19">Fall 2015 - Carlisle Elementary Chess Program - Plano ISD</option>
                                    <option value="20">Fall 2015 - Gulledge Elementary Chess Program - Plano ISD</option>
                                    <option value="21">Fall 2015 - Hosp Elementary Chess Program - Frisco ISD</option>
                                    <option value="22">Fall 2015 - Isbell Elementary Chess Program - Frisco ISD</option>
                                    <option value="23">Fall 2015 - Mathews Elementary Chess Program - Plano ISD</option>
                                    <option value="24">Fall 2015 - McCall Elementary Chess Program - Plano ISD</option>
                                    <option value="25">Fall 2015 - McSpedden Elementary Chess Program - Frisco ISD</option>
                                    <option value="26">Fall 2015 - Riddle Elementary Chess Program - Frisco ISD</option>
                                    <option value="27">Fall 2015 - Schell Elementary Chess Program - Plano ISD</option>
                                    <option value="28">Fall 2015 - Sem Elementary Chess Program - Frisco ISD</option>
                                    <option value="29">Fall 2015 - Shepard Elementary Chess Program - Plano ISD</option>
                                    <option value="30">Fall 2015 - Skaggs Elementary Chess Program - Plano ISD</option>
                                    <option value="31">Huffman Elementary Chess Program - Spring 2014 Session 1</option>
                                    <option value="52">Admin</option>
                                </select>
            </td>
        </tr>
        <tr>
            <td width="20%">School Name</td>
            <td><input type="text" name="txtschoolname" readonly /></td>
        </tr>
        <tr>
            <td width="20%">Day of Week</td>
            <td><input type="text" name="txtdayofweek" readonly /></td>
        </tr>
        <tr>
            <td width="20%">Start Date</td>
            <td><input type="text" name="txtstartdate" id="txtstartdate" readonly /></td>
        </tr>
        <tr>
            <td width="20%">End Date</td>
            <td><input type="text" name="txtenddate" id="txtenddate" readonly /></td>
        </tr>
        <tr>
            <td width="20%">Expense Allowance Value</td>
            <td><input type="text" name="txtexpenseallowancevalue" /></td>
        </tr>
        <tr>
            <td width="20%">Admin Hours Allowed</td>
            <td><input type="text" name="txtadminhoursallowed" /></td>
        </tr>
    </tbody>
</table>
Javascript

<script type="text/javascript">
jQuery(document).ready(function(){
    // jQuery('#txtstartdate').Zebra_DatePicker({
        // format: 'd-m-Y'
    // });
    // jQuery('#txtenddate').Zebra_DatePicker({
        // format: 'd-m-Y'
    // });
    jQuery.validator.addMethod("notEqual", function(value, element, param) {
      return this.optional(element) || value != param;
    }, "Please choose a value!");
    jQuery.validator.addMethod("notAdmin", function(value, element, param) {
      // return this.optional(element) || value != param;
      if(jQuery("#txtsession").val()=='Admin'){
          return jQuery(this).val()=' ';
      } else {
          return false;
      }
      return jQuery("#txtsession").val() == 'Admin';
    }, "Please choose a value!");
    jQuery("#addpreassignmentform").validate({
        rules:{
               txtuser:{
                  required: true,
                  notEqual: "--select--"    
               },
               txtsession:{
                  required: true,
                  notEqual: "--select--"    
               },
               txtschoolname: 'required',
               // txtdayofweek: 'required',
               txtdayofweek: {
                  notAdmin: "Admin",
               },
               txtstartdate: 'required',
               txtenddate: 'required',
        },
        messages:{
            txtuser: "Please select a user",
            txtsession: "Please select a session",          
            txtschoolname: "Please select a session so the school name will be loaded",
            txtdayofweek: "Please select a session so the day of week will be loaded",
            txtstartdate: "Please select a session so the start date will be loaded",
            txtenddate: "Please select a session so the end date will be loaded",
        }
    });
    jQuery("select[name='txtsession']").change(function(){
        jQuery.ajax({
            url:ajaxurl,
            type:'post',
            data:{action:'timecardapp_add_pre_assignments',postdata: jQuery("#addpreassignmentform").serialize()},
            success: function(response){        
                var data=JSON.parse(response);
                jQuery("input[name='txtschoolname']").val(data.event_category);
                jQuery("input[name='txtdayofweek']").val(data.session_dayofweek);
                jQuery("input[name='txtstartdate']").val(data.session_start_date);
                jQuery("input[name='txtenddate']").val(data.session_end_date);
            }
        });
    });
});
</script>

主要问题是jQuery("#txtsession").val()返回value属性而不是<option>内的文本。所以它给出52,所以表达式25=='Admin'是假的。相反,您将希望使用.text()获得选定的元素。所以你可以替换:

jQuery("#txtsession").val()

:

$("#txtsession option:selected").text()