jQuery bsValidate Plugin Demos

Basic Example


                <!-- Fields need to be wrapped in a .field-group to ensure proper display of error messages -->
                <div class="form-group">
                  <!-- A label should be included, either with the <label> tag or an element given the .label class -->
                  <label class="control-label">Name</label>
                  <!-- This field will be required, because it uses the .required class -->
                  <input type="text" name="name" class="form-control required" />
                </div>
                <div class="form-group">
                  <label class="control-label">Email</label>
                  <!-- This field will also be required, because it uses the [required] attribute -->
                  <input type="text" name="email" class="form-control" required />
                </div>
                <div class="form-group">
                  <label class="control-label">Message</label>
                  <!-- No validation will be applied to this field -->
                  <textarea name="message" class="form-control" rows="8"></textarea>
                </div>
                <div class="form-group">
                  <input type="submit" class="btn btn-primary" value="Submit" />
                </div>
              

                $('#simpleForm').bsValidate();
              

Custom Messages


                <form id="customMessagesForm" action="success.html" method="post" class="well">
                  <div class="form-group">
                    <label class="control-label">Name</label>
                    <input type="text" name="name" class="form-control" />
                  </div>
                  <div class="form-group">
                    <label class="control-label">Email</label>
                    <input type="text" name="email" class="form-control" />
                  </div>
                  <div class="form-group">
                    <label class="control-label">Message</label>
                    <textarea name="message" class="form-control" rows="8"></textarea>
                  </div>
                  <div class="form-group">
                    <input type="submit" class="btn btn-primary" value="Submit" />
                  </div>
                </form>
              

                $('#customMessagesForm').bsValidate({
                  fields:{
                    name: {
                      required: {
                        helpText: "Please enter your name.",
                        alert: "You are required to enter your name."
                      }
                    },
                    email: {
                      required: {
                        helpText: "Please enter your email.",
                        alert: "You are required to enter your email."
                      }
                    }
                  }
                });