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="separator-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="separator-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');
	},
});