Examples

                    
                      <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">
                            <span class="input-group-text" id="username-addon">@</span>
                            <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-group">
                        <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="form-check">
                              <input class="form-check-input" type="checkbox" id="agree" name="agree" required>
                              <label class="form-check-label" for="flexCheckDefault">
                                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');
                        },
                      });