jquery validation test

by Jason Crowther

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<form id="testForm">

<select id="hwUnits">
  <option value="1">1</option>
  <option value="2">2</option>
</select>

<p class="twrapper">
  <label for="t1">t1</label>
  <input type="text" id="t1" name="t1">
</p>
<p class="twrapper" style="display: none">
  <label for="t2">t2</label>
  <input type="text" id="t2" name="t2">
</p>

<input type="submit">
</form>

JavaScript

$(document).ready( function(){
	$('#testForm').validate({
  	rules: {
  		hwUnits: { required: true },
    //  t1: { required: function() { return $('#hwUnits').val() == 1 } },
    //  t2: { required: function() { return $('#hwUnits').val() == 2 } },

// not sure why this doens't work!
      t1: { required: one },
      t2: { required: two },

		}
  });
  $('#hwUnits').change(function(){ $('.twrapper').toggle() });
  
});

function one() { return $('#hwUnits').val() == 1 }
function two() { return $('#hwUnits').val() == 2 }