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
<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>
The main problem is that
jQuery("#txtsession").val()
is returning thevalue
attrbute and not the text inside<option>
. So it gives52
, so the expression25=='Admin'
is false. Instead you will want to get the selected element with.text()
. So you would replace:With: