web-zen/gist:195643

## gistfile1.txt
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
  <title>Simple Form Validation</title>
  <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
  <script type="text/javascript" src="jquery-validate/jquery.validate.min.js"></script>

<!-- http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js-->

   <script type="text/javascript">
		SubmittingForm=function() {
			alert("The form has been validated.");
		}

		$(document).ready(function() {
			$("#fvujq-form1").validate({
				submitHandler:function(form) {
					SubmittingForm();
				},
				rules: {
					name: {
                        required: true,
                        minlength: 5
                    },

					email: {				// compound rule
						required: true,
						email: true
					},
					url: {
						url: true
					},
					date: {
						date: true
					},
                    sport: {
						selectNone: true
                    },
					comment: {
						required: true
					}
				},
				messages: {
                    email: "you need an real email",
					comment: "Please enter a comment."
				}
			});
		});

		jQuery.validator.addMethod(
			"selectNone",
			function(value, element) {
				if (element.value == "none")
				{
					return false;
				}
				else return true;
			},
			"Please select an option."
		);

	</script>

<style type="text/css">
    .form-div {
      border: 1px #ccc solid;
      padding: 10px;
      width: 650px;
    }

    .form-div .submit {
      margin-left: 155px;
      margin-top: 10px;
    }

    .form-div .label {
      display: block;
      float: left;
      width: 150px;
      text-align: right;
      margin-right: 5px;
    }

    .form-div .form-row {
      padding: 5px 0;
      clear: both;
      width: 700px;
    }

    .form-div label.error {
      width: 250px;
      display: block;
      float: left;
      color: red;
      padding-left: 10px;
    }

    .form-div input[type=text], select, textarea {
      width: 250px;
      float: left;
    }

    .form-div textarea {
      height: 50px;
    }
</style>

</head>

<body>

<div class="form-div">
 	<form id="fvujq-form1" method="post" action="http://www.cnn.com">
  		<div class="form-row">
            <span class="label">Name *</span>
            <input type="text" name="name">
  		</div>

        <div class="form-row">
            <span class="label">E-Mail *</span>
            <input type="text" name="email">
  		</div>

        <div class="form-row">
            <span class="label">Date *</span>
            <input type="text" name="date">
  		</div>

		<div class="form-row"><span class="label"><label for="sport">Favorite Sport *</label></span>
			<select name="sport" id="sport">
				<option value="none">Select a sport</option>
				<option value="baseball">Baseball</option>
				<option value="basketball">Basketball</option>
				<option value="soccer">Soccer</option>

				<option value="football">Football</option>
			</select>
		</div>


        <div class="form-row">
            <span class="label">URL&nbsp;&nbsp;&nbsp;</span>
            <input type="text" name="url">
  		</div>

        <div class="form-row">
            <span class="label">Your comment *</span>
            <textarea name="comment"></textarea>
  		</div>

        <div class="form-row">
            <input class="submit" type="submit" value="Submit">
  		</div>

        <div class="form-row"><span>* indicates a required field</span>
        </div>

 	</form>
</div>

</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
	<head>
	<title>Simple Form Validation</title>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jquery-validate/jquery.validate.min.js"></script>

	<!-- http://ajax.microsoft.com/ajax/jquery.validate/1.5.5/jquery.validate.js-->

	<script type="text/javascript">
	SubmittingForm=function() {
	alert("The form has been validated.");
	}

	$(document).ready(function() {
	$("#fvujq-form1").validate({
	submitHandler:function(form) {
	SubmittingForm();
	},
	rules: {
	name: {
	required: true,
	minlength: 5
	},

	email: { // compound rule
	required: true,
	email: true
	},
	url: {
	url: true
	},
	date: {
	date: true
	},
	sport: {
	selectNone: true
	},
	comment: {
	required: true
	}
	},
	messages: {
	email: "you need an real email",
	comment: "Please enter a comment."
	}
	});
	});

	jQuery.validator.addMethod(
	"selectNone",
	function(value, element) {
	if (element.value == "none")
	{
	return false;
	}
	else return true;
	},
	"Please select an option."
	);

	</script>

	<style type="text/css">
	.form-div {
	border: 1px #ccc solid;
	padding: 10px;
	width: 650px;
	}

	.form-div .submit {
	margin-left: 155px;
	margin-top: 10px;
	}

	.form-div .label {
	display: block;
	float: left;
	width: 150px;
	text-align: right;
	margin-right: 5px;
	}

	.form-div .form-row {
	padding: 5px 0;
	clear: both;
	width: 700px;
	}

	.form-div label.error {
	width: 250px;
	display: block;
	float: left;
	color: red;
	padding-left: 10px;
	}

	.form-div input[type=text], select, textarea {
	width: 250px;
	float: left;
	}

	.form-div textarea {
	height: 50px;
	}
	</style>

	</head>

	<body>

	<div class="form-div">
	<form id="fvujq-form1" method="post" action="http://www.cnn.com">
	<div class="form-row">
	<span class="label">Name *</span>
	<input type="text" name="name">
	</div>

	<div class="form-row">
	<span class="label">E-Mail *</span>
	<input type="text" name="email">
	</div>

	<div class="form-row">
	<span class="label">Date *</span>
	<input type="text" name="date">
	</div>

	<div class="form-row"><span class="label"><label for="sport">Favorite Sport *</label></span>
	<select name="sport" id="sport">
	<option value="none">Select a sport</option>
	<option value="baseball">Baseball</option>
	<option value="basketball">Basketball</option>
	<option value="soccer">Soccer</option>

	<option value="football">Football</option>
	</select>
	</div>


	<div class="form-row">
	<span class="label">URL   </span>
	<input type="text" name="url">
	</div>

	<div class="form-row">
	<span class="label">Your comment *</span>
	<textarea name="comment"></textarea>
	</div>

	<div class="form-row">
	<input class="submit" type="submit" value="Submit">
	</div>

	<div class="form-row"><span>* indicates a required field</span>
	</div>

	</form>
	</div>

	</body>
	</html>