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

I am using jquery validate library for validating the form. I have a dropdown for the sessions field on selecting this session the start and end dates are populated into the start date, end date and dayofweek textboxes. What i want to do is fire the required condition for dayofweek only when the session name is not equal to Admin. How can i do it. Please help me. Thanks in advance.

HTML

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

Related posts

1 comment

  1. The main problem is that jQuery("#txtsession").val() is returning the value attrbute and not the text inside <option>. So it gives 52, so the expression 25=='Admin' is false. Instead you will want to get the selected element with .text(). So you would replace:

    jQuery("#txtsession").val()
    

    With:

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

Comments are closed.