$(document).ready(function() {

	$(".datepicker").datepick({
		dateFormat: 'yyyy-mm-dd',
		yearRange: '1910:2010'
	});
    
	$(".date").mask("9999-99-99");
	$('textarea.autoresize').autoResize({extraSpace: 40, onResize : function() {
        $(this).css({opacity:0.8});
    },
    // After resize:
    animateCallback : function() {
        $(this).css({opacity:1});
    }});
	
	$("form#registration").validate({

		rules: {
			FamilyName: 'required',
			GivenName: 'required',
			Email: {
				required: true,
				email: true
			},
			MobilePhone: 'required',
			DateOfBirth: 'required',
			Occupation: 'required',
//			Nationality: {
//			required: true,
//			range: [1, 999]
//		},
			Gender: 'required'

		},
		messages: {
			Nationality: {
				range: 'Please choose your nationality!'
			}
		},
		errorPlacement: function(error, element){
		    if (element.is(":radio")){
		        error.appendTo(element.parent().parent());
		    }
		    else {
		        error.insertAfter(element);
		    }
		}

	});
	
	
});
/*



Nationality: {
	// required aber nicht 0

},




<fieldset class="clearfix">
<legend>Notification in Case of Emergency</legend>
<label class="grid_3 optional" for="ContactName">Name</label><input type="text" value="" class="grid_8" id="ContactName" name="ContactName" />
<label class="grid_3 optional" for="ContactTelephone">Telephone</label><input type="text" value="" class="grid_8" id="ContactTelephone" name="ContactTelephone" />
<label class="grid_3 optional" for="ContactEmail">Email</label><input type="text" value="" class="grid_8" id="ContactEmail" name="ContactEmail" />
<label class="grid_3 optional" for="ContactRelationship">Relationship to Card Holder</label><input type="text" value="" class="grid_8" id="ContactRelationship" name="ContactRelationship" />
</fieldset>

<fieldset class="clearfix"><legend>Medical Data</legend>
<label class="grid_3 optional" for="BloodType">Blood Type</label><input type="text" value="" class="grid_8" id="BloodType" name="BloodType" />
<label class="grid_3 optional" for="Allergies">Allergies</label><input type="text" value="" class="grid_8" id="Allergies" name="Allergies" />
<label class="grid_3 optional" for="PreviousSurgeries">Previous Surgeries</label><input type="text" value="" class="grid_8" id="PreviousSurgeries" name="PreviousSurgeries" />
<label class="grid_3 optional" for="PermanentSicknesses">Permanent Sicknesses</label><input type="text" value="" class="grid_8" id="PermanentSicknesses" name="PermanentSicknesses" />
<label class="grid_3 optional" for="MedicineTaken">Medicine Taken<span> (permanent/temporary)</span></label><input type="text" value="" class="grid_8" id="MedicineTaken" name="MedicineTaken" />
<label class="grid_3 optional" for="FurtherNotes">Further Notes</label><textarea class="grid_8" id="FurtherNotes" name="FurtherNotes" rows="3" cols="20"></textarea>
</fieldset>

<fieldset class="clearfix"><legend>Information about your health insurance</legend>
<label class="grid_3 optional" for="healthinsurance">Health Insurance</label><textarea class="grid_8" id="healthinsurance" name="healthinsurance" rows="3" cols="20"></textarea>
</fieldset>



PlaceOfBirth
Occupation
<fieldset class="clearfix">
<legend>Address Data</legend>
<label class="grid_3 optional" for="CityOfResidence">City of Residence</label><input type="text" value="" class="grid_8" id="CityOfResidence" name="CityOfResidence" />
<label class="grid_3 optional" for="CountryOfResidence">Country of Residence</label><select name="CountryOfResidence" id="CountryOfResidence" class="grid_8"><?php echo selectfield($countries);?></select><div class="clear"></div>
<label class="grid_3 optional" for="AddressInThailand">Address in Thailand</label><input type="text" value="" class="grid_8" id="AddressInThailand" name="AddressInThailand" />
</fieldset>

<fieldset class="clearfix">
<legend>Passport and Visa Data</legend>
<label class="grid_3 optional" for="PassportNumber">Passport Number</label><input type="text" value="" class="grid_8" id="PassportNumber" name="PassportNumber" />
<label class="grid_3 optional" for="PlaceOfIssue">Place of Issue</label><input type="text" value="" class="grid_8" id="PlaceOfIssue" name="PlaceOfIssue" />
<label class="grid_3 optional" for="ExpiryOfPassport">Expiry of Passport (YYYY-MM-DD)</label><input type="text" value="" class="grid_8 datepicker" id="ExpiryOfPassport" name="ExpiryOfPassport" />
<label class="grid_3 optional" for="CurrentVisaNo">Current Visa Number</label><input type="text" value="" class="grid_8" id="CurrentVisaNo" name="CurrentVisaNo" />
<label class="grid_3 optional" for="VisaType">Visa Type</label><input type="text" value="" class="grid_8" id="VisaType" name="VisaType" />
<label class="grid_3 optional" for="DateOfLastEntry">Date of last entry to Thailand (YYYY-MM-DD)</label><input type="text" value="" class="grid_8 datepicker" id="DateOfLastEntry" name="DateOfLastEntry" /><div class="clear"></div>
<label class="grid_3 optional" for="LastEmbarkation">Place of last entry to Thailand</label><input type="text" value="" class="grid_8" id="LastEmbarkation" name="LastEmbarkation" /><div class="clear"></div>
<label class="grid_3 optional" for="VisaValidUntil">Current visa is valid until (YYYY-MM-DD)</label><input type="text" value="" class="grid_8 datepicker" id="VisaValidUntil" name="VisaValidUntil" />
</fieldset>









OPTIONS

errorClass = "ui-validation-error"
Set the class added to input fields on invalid input.

errorMessageClass = "ui-validation-error-message"
Set the class added to input field labels on invalid input.

label = undefined,
When set, the jQuery wrapped label is used for this input field. When undefined, the label associated with the input field is automatically used.

completionIcon = undefined
When set, the jQuery wrapped completion icon div is used for this input field. When undefined, the icon div associated with the input field is automatically used.

appendCompletionIcon = false
When true, a completion icon div is appended along side the input field. When false, no completion icon div is automatically appended.

completionIconClass = "ui-validation-completion"
Set the class used to identify completion icon divs.

completionIconCompleteClass = "ui-validation-complete"
Set the class added to completion icon divs when the input is valid.

delayAfterTyping = 500
Set the delay after the user finishing typing in an input field to check whether the input field has a valid value.

validateOnLoad = false
When true, validates the input field on page load. When false, the input field is not validated on page load (allows for initial empty field on load case).

valid = function(inputValue){ return true; }
Set the values that are considered valid when the input is checked. The function returns true for valid input and false for invalid input.

errorMessage = function(inputValue){ return "is not valid"; }
Set the message to display in the label when the input is invalid. Messages can be varied according to the argument.

onValidate = function(){}
A callback function that is called on the validate event, when the input is checked for whether it is valid. You can alternatively use bind("validate", func).

onValid = function(){}
A callback function that is called on the valid event, when the input is found to be valid after the validate event. You can alternatively use bind("valid", func).

onInvalid = function(){}
A callback function that is called on the invalid event, when the input is found to be invalid after the validate event. You can alternatively use bind("invalid", func).




*/