jQuery Validate - Add and Remove Rules Dynamically

by Lavika Kurda

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<form id='new-user'>
  <div>
     <label>Name:</label>
     <input type='text' name='name'>
  </div>
   <div>
     <label> Fathers Name:</label>
     <input type='text' name='fathersname'>
  </div>
    <div>
     <label>Wish to add NickName?</label>
     <input type='checkbox' name='nickname'id='add-nick-name'>
  </div>
  <div style='display:none;' class='nick-name'>
     <label> NickName:</label>
     <input type='text' name='nick' id='nickname'>
     </div>
  <div>
    <input type='submit' value='Validate'>
  </div>
</form>

JavaScript

$(document).ready(function() {
  
  $('#new-user').validate({
  	ignore: "",
  	rules: {
    	name: {
      	required: true
      },
      fathersname: {
      	required: true
      }
    }
  });
  
  $('#add-nick-name').click(function(){
  	if( $(this).is(':checked') ) {
    	$('.nick-name').show();
      $('#new-user').validate();
      $('#nickname').rules('add',  { required: true });
    } else {
    	$('.nick-name').hide();
      $('#nickname').rules('remove',  'required')
    }
  })
})