SO - 15042275

by Arun P Johny

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<form id="signupForm" method="post" name="" action="">
<p>
	<label for="firstname"></label>
    <input class="inputText" type="text" id="firstname" name="firstname" placeholder="First Name">
</p>
<p>
	<label for="country"></label>
	<input class="inputText" type="text" id="country" name="country" placeholder="Country"/>
    <input type="hidden" name="countryCode" id="countryCode" />
</p>
<p>
    <label for="lastname"></label>
	<input class="inputText" type="text" id="lastname" name="lastname" placeholder="Last Name">
</p>
<p>
    <label for="email"></label>
	<input class="inputText" type="text" id="email" name="email" placeholder="Email">
</p>
<p>
			<input class="submit" type="submit" id="signupButton" value="SUBMIT" />   
</p>
</form>

JavaScript

var countries = [{label:"Vanuatu", code:"VU"},
			{label:"Ecuador", code:"EC"}];    
        $().ready(function() {
	$('#country').autocomplete({
		source : function(request, response) {
			var matcher = new RegExp('^'+$.ui.autocomplete.escapeRegex(request.term), "i");
			response($.grep(countries, function(element, index) {
				return matcher.test(element.label);
			}));
		},
		delay : 0,
		change : function(event, ui) {
			$('#countryCode').val(ui.item ? ui.item.code : '');
		}
	});
	$("#signupForm").validate({
		ignore: "",
		rules: {
			firstname: {
				required: true
			},
			lastname: {
				required: true
			},
			country: {
				required: true
			},
			countryCode: {
				required: function(element){
					return $("#country").val().length > 0;
				}
			},
			email: {
				required: true,
				email: true
			}
		},	
		messages: {
			firstname: "Please enter your first name",
			lastname: "Please enter your last name",
			country: "Please select a country",
			countryCode: "Please select a valid country",
			email: "Please enter a valid email address"
		},
		submitHandler: function(form) {
			alert("fine!");
		}
	});
});