<commit_before>---
layout: default
title: Validator
slug: validator
lead: "A simple and user-friendly form validator plugin for Bootstrap 3"
base_url: "../"
---


  <!-- Dropdowns
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="validator">Validator <small>validator.js</small></h1>
    </div>

    <h2 id="validator-examples">Examples</h2>
    <p>Add validation to your forms with this simple plugin.</p>

    <div class="bs-example">
      <form data-toggle="validator" role="form">
        <div class="form-group">
          <label for="inputName" class="control-label">Name</label>
          <input type="text" class="form-control" id="inputName" placeholder="<NAME>" required>
        </div>
        <div class="form-group">
          <label for="inputTwitter" class="control-label">Twitter</label>
          <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1<PASSWORD>" required>
          </div>
          <span class="help-block with-errors">Up to 20 letters, numbers and underscores</span>
        </div>
        <div class="form-group">
          <label for="inputEmail" class="control-label">Email</label>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
          <div class="help-block with-errors"></div>
        </div>
        <div class="form-group">
          <label for="inputPassword" class="control-label">Password</label>
          <div class="form-inline row">
            <div class="form-group col-sm-6">
              <input type="password" data-toggle="validator" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
              <span class="help-block">Minimum of 6 characters</span>
            </div>
            <div class="form-group col-sm-6">
              <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-error="Whoops, these don't match" placeholder="Confirm" required>
              <div class="help-block with-errors"></div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
        </div>
      </form>
    </div> <!-- /example -->
{% highlight html %}
<form data-toggle="validator" role="form">
  <div class="form-group">
    <label for="inputName" class="control-label">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="<NAME>" required>
  </div>
  <div class="form-group">
    <label for="inputTwitter" class="control-label">Twitter</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1000hz" required>
    </div>
    <span class="help-block with-errors">Up to 20 letters, numbers and underscores</span>
  </div>
  <div class="form-group">
    <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div class="form-group col-sm-6">
      <input type="password" data-toggle="validator" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
      <span class="help-block">Minimum of 6 characters</span>
    </div>
    <div class="form-group col-sm-6">
      <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-error="Whoops, these don't match" placeholder="<PASSWORD>" required>
      <div class="help-block with-errors"></div>
    </div>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
  </div>
</form>
{% endhighlight %}


    <h2 id="validator-usage">Usage</h2>
    Form validation can be enabled in markup via the data-api or via JavaScript.

    Automatically enable form validation by adding <code>data-toggle="validator"</code> to your form element.

{% highlight html %}
<form role="form" data-toggle="validator">
  ...
</form>
{% endhighlight %}

    Or activate validation via JavaScript:

{% highlight js %}
$('#myForm').validator()
{% endhighlight %}

    <h3 id="validator-markup">Markup</h3>
    <p>Follow Bootstrap's <a href="http://getbootstrap.com/css/#forms" target="_blank">examples</a> for appropriate form markup.</p>

    <p>Validation rules are specified on form inputs via the following standard attributes:</p>
    <ul>
      <li><code>type="email"</code></li>
      <li><code>type="url"</code></li>
      <li><code>type="number"</code>, with additional constraints via <code>max</code> and <code>min</code> attributes</li>
      <li><code>pattern="Reg(ular )?Exp(ression)?"</code> (for input types of <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>)</li>
      <li><code>required</code></li>
    </ul>

    <p>As well as the following non-standard attributes:</p>
    <ul>
      <li><code>data-match="#inputToMatch"</code> to ensure two fields match, e.g. password confirmations</li>
      <li><code>data-minlength="5"</code> to enforce a minimum amount of characters</li>
    </ul>

    <p>To display error messages, include a container after the input field with both <code>help-block</code> and <code>with-errors</code> classes.</p>


{% highlight html %}
<form role="form" data-toggle="validator">
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" id="inputEmail">
    <div class="help-block with-errors"></div>
  </div><commit_msg>lil tweaks<commit_after>---
layout: default
title: Validator
slug: validator
lead: "A simple and user-friendly form validator plugin for Bootstrap 3"
base_url: "../"
---


  <!-- Dropdowns
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="validator">Validator <small>validator.js</small></h1>
    </div>

    <h2 id="validator-examples">Examples</h2>
    <p>Add validation to your forms with this simple plugin.</p>

    <div class="bs-example">
      <form data-toggle="validator" role="form">
        <div class="form-group">
          <label for="inputName" class="control-label">Name</label>
          <input type="text" class="form-control" id="inputName" placeholder="<NAME>" required>
        </div>
        <div class="form-group">
          <label for="inputTwitter" class="control-label">Twitter</label>
          <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1<PASSWORD>" required>
          </div>
          <span class="help-block with-errors">Up to 20 letters, numbers and underscores</span>
        </div>
        <div class="form-group">
          <label for="inputEmail" class="control-label">Email</label>
          <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
          <div class="help-block with-errors"></div>
        </div>
        <div class="form-group">
          <label for="inputPassword" class="control-label">Password</label>
          <div class="form-inline row">
            <div class="form-group col-sm-6">
              <input type="password" data-toggle="validator" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
              <span class="help-block">Minimum of 6 characters</span>
            </div>
            <div class="form-group col-sm-6">
              <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
              <div class="help-block with-errors"></div>
            </div>
          </div>
        </div>
        <div class="form-group">
          <button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
        </div>
      </form>
    </div> <!-- /example -->
{% highlight html %}
<form data-toggle="validator" role="form">
  <div class="form-group">
    <label for="inputName" class="control-label">Name</label>
    <input type="text" class="form-control" id="inputName" placeholder="<NAME>" required>
  </div>
  <div class="form-group">
    <label for="inputTwitter" class="control-label">Twitter</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" pattern="^([_A-z0-9]){3,}$" maxlength="20" class="form-control" id="inputTwitter" placeholder="1000hz" required>
    </div>
    <span class="help-block with-errors">Up to 20 letters, numbers and underscores</span>
  </div>
  <div class="form-group">
    <label for="inputEmail" class="control-label">Email</label>
    <input type="email" class="form-control" id="inputEmail" placeholder="Email" data-error="Bruh, that email address is invalid" required>
    <div class="help-block with-errors"></div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="control-label">Password</label>
    <div class="form-group col-sm-6">
      <input type="password" data-toggle="validator" data-minlength="6" class="form-control" id="inputPassword" placeholder="Password" required>
      <span class="help-block">Minimum of 6 characters</span>
    </div>
    <div class="form-group col-sm-6">
      <input type="password" class="form-control" id="inputPasswordConfirm" data-match="#inputPassword" data-match-error="Whoops, these don't match" placeholder="Confirm" required>
      <div class="help-block with-errors"></div>
    </div>
    </div>
  </div>
  <div class="form-group">
    <button type="submit" class="btn btn-primary" disabled="disabled">Submit</button>
  </div>
</form>
{% endhighlight %}


    <h2 id="validator-usage">Usage</h2>
    Form validation can be enabled in markup via the data-api or via JavaScript.

    Automatically enable form validation by adding <code>data-toggle="validator"</code> to your form element.

{% highlight html %}
<form role="form" data-toggle="validator">
  ...
</form>
{% endhighlight %}

    Or activate validation via JavaScript:

{% highlight js %}
$('#myForm').validator()
{% endhighlight %}

    <h3 id="validator-markup">Markup</h3>
    <p>Follow Bootstrap's <a href="http://getbootstrap.com/css/#forms" target="_blank">examples</a> for appropriate form markup.</p>

    <p>Validation rules are specified on form inputs via the following standard HTML5 attributes:</p>
    <ul>
      <li><code>type="email"</code></li>
      <li><code>type="url"</code></li>
      <li><code>type="number"</code>, with additional constraints via <code>max</code> and <code>min</code> attributes</li>
      <li><code>pattern="Reg(ular )?Exp(ression)?"</code> (for input types of <code>text</code>, <code>search</code>, <code>tel</code>, <code>url</code> or <code>email</code>)</li>
      <li><code>required</code></li>
    </ul>

    <p>As well as the following non-standard attributes:</p>
    <ul>
      <li><code>data-match="#inputToMatch"</code> to ensure two fields match, e.g. password confirmations</li>
      <li><code>data-minlength="5"</code> to enforce a minimum amount of characters</li>
    </ul>

    <p>To display error messages, include a container after the input field with both <code>help-block</code> and <code>with-errors</code> classes.</p>


{% highlight html %}
<form role="form" data-toggle="validator">
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" id="inputEmail">
    <div class="help-block with-errors"></div>
  </div>
{'fraction_non_alphanumeric': 0.18490689317216596, 'fraction_numerical': 0.0061254491996079715, 'mean_word_length': 3.696969696969697, 'pattern_counts': {'":': 0, '<': 370, '<?xml version=': 0, '>': 370, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5119062', 'n_tokens_mistral': 3777, 'n_tokens_neox': 3656, 'n_words': 859}