JQuery Bootstrap Validator - bahkified/Notes GitHub Wiki

A JQuery library used for simple form validation along with Bootstrap. In order to use this validation framework, follow these steps:

1) Include JQuery and Bootstrap in your page, as normal

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- JQuery and Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

2) Include two jqBootstrapValidation JS scripts

<script src="/js/jqBootstrapValidation.js"></script>

<script>
  $(function () { $("input,select,textarea").not("[type=submit]").jqBootstrapValidation(); } );
</script>

The second script defines which elements to validate.

3) Check the jqBootstrapValidation page for validation rules, and how to apply them. It should be noted that the field to be validated plus the message element must be wrapped in a div with class controls which, itself, must be wrapped in a div with class control-group. This is shown below as well as the implementation of a regex pattern validator

<form class="form-horizontal">
    <div class="control-group">
        <label class="control-label">Type something</label>
        <div class="controls">
            <input type="text" 
                pattern="a.*z" 
                data-validation-pattern-message="Must start with 'a' and end with 'z'" 
                name="some_field" />
            <p class="help-block">Must start with 'a' and end with 'z'</p>
        </div>
    </div>
</form>

Resources

⚠️ **GitHub.com Fallback** ⚠️