jqBootstrapValidation test

by karimkhan

HTML

<script src="http://reactiveraven.github.io/jqBootstrapValidation/js/bootstrap.js"></script>
<script src="http://reactiveraven.github.io/jqBootstrapValidation/js/jqBootstrapValidation.js"></script>
<link rel="stylesheet" href="http://reactiveraven.github.io/jqBootstrapValidation/css/bootstrap.css">
<form class="form-horizontal" novalidate>
  <div class="control-group">
    <label class="control-label">Type something</label>
    <div class="controls">
      <input 
        required
        data-validation-required-message="Please fill out this field" 
        type="number" 
        data-validation-number-message="Must be a number" 
      />
      <p class="help-block"></p>
    </div>
  </div>
    <div class="form-actions">
                                                <button type="submit" class="btn btn-primary">
                                                    Test Validation <i class="icon-ok icon-white"></i>
                                                </button>
                                            </div>
</form>

CSS

.form-horizontal {
    margin-top: 2em;
}

JavaScript

$(function() {
                $(".form-horizontal").find("input,textarea,select").jqBootstrapValidation(
                    {
                        preventSubmit: true,
                        submitError: function($form, event, errors) {
                            // Here I do nothing, but you could do something like display 
                            // the error messages to the user, log, etc.
                        },
                        submitSuccess: function($form, event) {
                            alert("OK");
                            event.preventDefault();
                        },
                        filter: function() {
                            return $(this).is(":visible");
                        }
                    }
                );
            });