There's probably a dozen different ways to accomplish this, but making the change on the "blur" event when the user exits the field is a good option and it gives immediate results so testing will be easier.

//triggers when the page loads
$(document).ready(function(){
  
  //assign blur event to update value when user exits the field
  $('#q1 input').blur(function(){
    
    //get name and clean up leading/trailing whitespace
    var name = $(this).val().trim();
    
    //replace first letter of each word with uppercase
    name = name.toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
	});
    
    //save the updated value back into the field
    $(this).val(name).change();
  });
});

Just replace "#q1 input" with your field, and you can get the "q" number on the css/javascript page (I'm assuming it is a single line field, input, but a multi-line would be textarea instead).

NOTE: There's two things to keep in mind for this code:

1. This works both ways, so if a user types all capital letters it will fix that as well
2. This does not account for hyphenated names so you might need to add a little more code to make it more robust.

It is also possible to consolidate these tasks into a much more compact form (see below), but I left them separated so you could get a better idea of what was actually happening in each step and troubleshoot more easily.

//triggers when the page loads
$(document).ready(function(){
  
  //assign blur event to update value when user exits the field
  $('#q1 input').blur(function(){
    
    //every step crammed into one package
    $(this).val($(this).val().trim().toLowerCase().replace(/\b[a-z]/g, function(letter) {
      return letter.toUpperCase();
	})).change();
  });
});