Form validation with jQuery

form-validation-with-jquery.markdown

Form validation with jQuery

Bootstrap form validation with jQuery Validation Plugin.

A Pen by Mihkel on CodePen.

License.

index.html

<div class="container">
		<div class="row">
			<div class="col-sm-8 col-sm-offset-2 well">
				<div class="col-sm-12 form-legend">
					<h2>Sign Up</h2>
				</div>
				<div class="col-sm-12 form-column">
					<form action="success" method="post">
						<div class="form-group">
							<label for="email">Your Email</label>
							<input type="email" id="email" name="email" class="form-control">
						</div>
						<div class="form-group">
							<label for="email-confirm">Confirm Email</label>
							<input type="email" id="email-confirm" name="emailConfirm" class="form-control">
						</div>
						<div class="form-group">
							<label for="country">Country</label>
							<input type="text" id="country" name="country" class="form-control" placeholder="Optional">
						</div>
						<div class="form-group">
							<label for="zip-code">Zip Code</label>
							<input type="text" id="zip-code" name="zipCode" class="form-control" placeholder="Optional">
						</div>
						<div class="form-group">
							<label for="password">Password</label>
							<input type="password" id="password" name="password" class="form-control" placeholder="Minimum 5 characters">
						</div>
						<div class="form-group">
							<label for="password-confirm">Confirm Password</label>
							<input type="password" id="password-confirm" name="passwordConfirm" class="form-control">
						</div>
						<div class="form-group">
							<div class="checkbox">
								<label>
									<input id="termsOfUse" type="checkbox" name="termsOfUse"> Yes, I agree to terms of use.
							    </label>
							</div>
						</div>
						<input type="submit" value="Sign Up" class="btn btn-primary">
					</form>
				</div>
			</div>
		</div>

script.js

$(document).ready(function () {
	//override jquery validate plugin defaults
	// http://stackoverflow.com/a/18754780

	$.validator.setDefaults({
	    highlight: function(element) {
	        $(element).closest(".form-group").addClass("has-error");
	    },

	    unhighlight: function(element) {
	        $(element).closest(".form-group").removeClass("has-error");
	    },

	    errorElement: "span",

	    errorClass: "help-block",

	    errorPlacement: function(error, element) {
	        if (element.parent(".input-group").length ||
	        	element.prop("type") === "checkbox" ||
	        	element.prop("type") === "radio"
	        ) {
	            error.insertAfter(element.parent());
	        } else {
	            error.insertAfter(element);
	        }
	    }
	});

	$("form").validate({
		rules: {
			email: {
				required: true,
				maxlength: 255
			},
			emailConfirm: {
				required: true,
				equalTo: "#email",
				maxlength: 255
			},
			zipCode: {
				maxlength: 32
			},
			password: {
				required: true,
				minlength: 5
			},
			passwordConfirm: {
				required: true,
				minlength: 5,
				equalTo: "#password"
			},
			termsOfUse: "required"
		},

		messages: {
			email: {
				required: "Please enter your email address.",
			},
			emailConfirm: {
				required: "Confirm your email address.",
				equalTo: "Emails do not match."
			},
			password: {
				required: "Please choose a password."
			},
			passwordConfirm: {
				required: "Confirm your password.",
				equalTo: "Passwords do not match."
			},
			termsOfUse: {
				required: "You must agree to terms of service."
			}
		}
	});
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>

style.css

.well {
	margin-top: 4%;
}

.form-legend {
	padding-bottom: 2em;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />