jQuery Validation

This jQuery plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. Read Full Documentation

Examples

@
We'll never share your email with anyone else.
								
									<form action="" id="exampleValidation">
	<div class="form-group row">
		<label for="username" class="col-form-label col-lg-3 col-sm-12 label-align-right">Username <span class="required-label">*</span></label>
		<div class="col-lg-4 col-md-9 col-sm-12">
			<div class="input-group">
				<div class="input-group-prepend">
					<span class="input-group-text" id="username-addon">@</span>
				</div>
				<input type="text" class="form-control" placeholder="username" aria-label="username" aria-describedby="username-addon" id="username" name="username" required>
			</div>
		</div>
	</div>
	<div class="form-group row">
		<label for="email" class="col-form-label col-lg-3 col-sm-12 label-align-right">Email Address <span class="required-label">*</span></label>
		<div class="col-lg-4 col-md-9 col-sm-12">
			<input type="email" class="form-control" id="email" placeholder="Enter Email" required>
			<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
		</div>
	</div>
	<div class="form-group row">
		<label for="password" class="col-form-label col-lg-3 col-sm-12 label-align-right">Password <span class="required-label">*</span></label>
		<div class="col-lg-4 col-md-9 col-sm-12">
			<input type="password" class="form-control" id="password" name="password" placeholder="Enter Password" required>
		</div>
	</div>
	<div class="form-group row">
		<label for="confirmpassword" class="col-form-label col-lg-3 col-sm-12 label-align-right">Confirm Password <span class="required-label">*</span></label>
		<div class="col-lg-4 col-md-9 col-sm-12">
			<input type="password" class="form-control" id="confirmpassword" name="confirmpassword" placeholder="Enter Password" required>
		</div>
	</div>
	<div class="seperator-solid"></div>
	<div class="form-check">
		<div class="row">
			<label class="col-form-label col-lg-3 col-sm-12 label-align-right">Agree <span class="required-label">*</span></label>
			<div class="col-lg-4 col-md-9 col-sm-12 d-flex align-items-center">
				<div class="custom-control custom-checkbox">
					<input type="checkbox" class="custom-control-input" id="agree" name="agree" required>
					<label class="custom-control-label" for="agree">Agree with terms and conditions</label>
				</div>
			</div>
		</div>
	</div>
	<div class="seperator-solid"></div>
	<div class="row">
		<div class="col-lg-3 col-sm-12 text-right">
			<input class="btn btn-success" type="submit" value="Validate">
			<button class="btn btn-danger">Cancel</button>
		</div>
	</div>
</form>
								
							
								
									$("#exampleValidation").validate({
	rules: {
		confirmpassword: {
			equalTo: "#password"
		}
	},
	highlight: function(element) {
		$(element).closest('.form-group').removeClass('has-success').addClass('has-error');
	},
	success: function(element) {
		$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
	},
});