<commit_before><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Parsley.js Documentation & API</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Keywords" content="javascript form validation, javascript, form, validation, jquery, plungin, html, UX">
    <meta name="description" content="Parsley is a dead simple javascript form validation, powerful and UX aware">
    <meta name="author" content="<NAME>">

    <!-- Le styles -->
    <link href="components/bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet" />
    <link href="http://yandex.st/highlightjs/7.3/styles/github.min.css" rel="stylesheet" />
    <style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
      }
      h3.muted {
          color: #08C;
      }
      /* Custom container */
      .container-narrow {
        margin: 0 auto;
        max-width: 940px;
      }
      .container-narrow > hr {
        margin: 30px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 60px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }
      section {
          margin-bottom: 45px;
      }
      form {
          margin: 0;
      }
      input.parsley-success, textarea.parsley-success {
        color: #468847 !important;
        background-color: #DFF0D8 !important;
        border: 1px solid #D6E9C6 !important;
      }
      input.parsley-error, textarea.parsley-error {
        color: #B94A48 !important;
        background-color: #F2DEDE !important;
        border: 1px solid #EED3D7 !important;
      }
      input {
          width: 150px;
          margin: 0 2px !important;
      }
      ul.parsley-error-list {
          font-size: 11px;
          margin: 2px;
          list-style-type:none;
      }
      ul.parsley-error-list li {
          line-height: 11px;
      }
      .social-buttons {
          padding: 5px 20px;
      }
      h3 {
          color: #FB4006;
      }

      .container-narrow > hr {
        margin:15px 0 0 0;
      }

      @media only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px) {
          .not-for-mobile {
              display: none;
          }
      }
    </style>
    <link href="components/bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

      <a href="https://github.com/guillaumepotier/Parsley.js"><img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

      <div class="container-narrow">

          <div class="masthead">
            <ul class="nav nav-pills pull-right">
              <li><a href="index.html">Home</a></li>
              <li class="active"><a href="documentation.html">Documentation</a></li>
              <li><a href="doc/api/index.html" target="_blank">API</a></li>
            </ul>
            <h3 class="muted">
                Parsley.js

                <span class="social-buttons inline-block">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-related="garlicjs: auto persist form values to avoid data loss,guillaumepotier" data-url="http://parsleyjs.org" data-lang="en" data-text="Parsley.js: never write a single javascript line anymore to validate your forms FrontEnd. #ui #ux #javascript"></a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

                    <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

                    <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

                </span>

            </h3>
          </div>

        <hr>

        <div class="row-fluid marketing">
            <h2>Demonstration</h2>

                <a name="parsleydemoform"></a>
                <table id="demonstration-form" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th width="27%">Classy demo</th>
                            <th width="73%" class="not-for-mobile">HTML Code (yes, no JS !)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <form id="demo-form">
                                    <label for="fullname">Full Name * :</label>
                                    <input type="text" id="fullname" name="fullname" data-required="true" />

                                    <label for="email">Email * :</label>
                                    <input type="text" id="email" name="email" data-type="email" data-trigger="change" data-required="true" />

                                    <label for="website">Website :</label>
                                    <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

                                    <label for="message">Message (20 chars min, 200 max) :</label>
                                    <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>

                                    <input type="hidden" name="superhidden" id="superhidden">
                                    <br/><span class="btn btn" id="demo-form-valid" onclick="javascript:$('#demo-form').parsley( 'validate' );"><i class="icon-ok"></i></span>
                                </form>
                                <small>Please, note that this demo form is not a perfect example of UX-awareness. The aim here is to show a quick overview of data-API and Parsley customizable behavior.</small>
                            </td>
                            <td class="not-for-mobile">
<pre><code>&lt;form id="demo-form" data-validate="parsley">
    &lt;label for="fullname">Full Name * :&lt;/label>
    &lt;input type="text" id="fullname" name="fullname" data-required="true" />

    &lt;label for="email">Email * :&lt;/label>
    &lt;input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

    &lt;label for="website">Website :&lt;/label>
    &lt;input type="text" id="website" name="website" data-trigger="change" data-type="url" />

    &lt;label for="message">Message (20 chars min, 200 max) :&lt;/label>
    &lt;textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]">&lt;/textarea>
&lt;/form></code></pre>
                            </td>
                        </tr>
                </table>

                <div class="alert alert-block alert-info">
                <span class="label label-important">Heads up!</span> <strong>Le #UX touch</strong>:
                <ul>
                    <li>
                        <strong>Min char validation</strong>: Parsley by default <strong>does not proceed with field validation when less than 3 chars have been input</strong>. Do not assault your users with error messages to soon! <i>(this behavior is configurable)</i>.
                    </li>
                    <li>
                        <strong>Quick error removal</strong>: when a field is detected and shown as invalid, further checks are done on each keypress to try to <strong>quickly remove error messages once the field is ok</strong>.
                    </li>
                    <li>
                        <strong>Control focusing on error</strong>: on form submission, the first error field is focused to <strong>allow the user to easily start fixing errors</strong>. <i>(this behavior is configurable)</i>
                    </li>
                </ul>
                </div>

                <hr>

            <a name="top"></a>
            <h2>Documentation</h2>

            <ol>
                <li><a href="#installation"><strong>Installation &amp; usage</strong>: one or two inclusions!</a></li>
                <li><a href="#parsleyform"><strong>Parsley Form</strong>: add some Parsley validation to your forms!</a></li>
                <li><a href="#parsleyfield"><strong>Parsley Field</strong>: customize each validated field validation behavior </a></li>
                <li>
                  <a href="#validators"><strong>Validators</strong>: learn the various validations you could do with Parsley</a>
                  <ol>
                      <li><a href="#basic-constraints">Basic constraints</a></li>
                      <li><a href="#type-constraints">Type constraints</a></li>
                      <li><a href="#extra-constraints">Extra constraints</a></li>
                  </ol>
                </li>
                <li>
                    <a href="#javascript"><strong>Javascript</strong>: yes, you still can do some javascript with Parsley. Intermediate level only!</a>
                    <ol>
                          <li><a href="#javascript-general">General</a></li>
                          <li><a href="#javascript-form">Form</a></li>
                          <li><a href="#javascript-fields">Fields</a></li>
                      </ol>
                </li>
                <li>
                    <a href="#parsleyclasses"><strong>Parsley CSS</strong>: last but not least, Parsley CSS classes</a>
                </li>
                <li>
                    <a href="#plugins-and-localization"><strong>Plugins &amp; Localization</strong>: extend Parsley messages, validators, templates and more!</a>
                </li>
                <li>
                  <a href="#integrations"><strong>Integrations</strong>: Use parsley from other frameworks.
                </li>
            </ol>

            <hr>

            <!-- //////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <section>
              <a name="installation"></a>
              <h3>Parsley Installation</h3>
              <p>Just include the <a href="https://github.com/guillaumepotier/Parsley.js/blob/master/dist/parsley.min.js">Parsley.js</a> file (with <a href="http://jquery.com/">jQuery</a> or <a href="http://zeptojs.com/">Zepto</a> with <strong><a href="https://github.com/madrobby/zepto#building">data and fx_methods modules</a></strong> added) or use <a href="https://github.com/guillaumepotier/Parsley.js/blob/master/dist/parsley-standalone.min.js">Parsley standalone</a> (with Zepto bundled inside)</p>
<pre><code>&lt;script type="text/javascript" src="jquery.js">&lt;/script>
&lt;script type="text/javascript" src="parsley.js">&lt;/script>

&lt;form data-validate="parsley">
  [...]
&lt;/form></code></pre>
            </section>
            <a href="#top" class="top pull-right">Top</a>

            <!-- //////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <section>
                <a name="parsleyform"></a>
                <h3>Parsley Form</h3>
                <p>This is the main Parsley form validation factory, where you decide if a form is validated, and set some extra options.</p>
                <pre><code>&lt;form data-validate="parsley">&lt;/form></code></pre>
                 <div class="alert alert-block alert-info">
                <span class="label label-important">Heads up!</span> <strong>HTML5</strong>:
                If you use HTML5 validation feature, add: <code>novalidate</code> attribute to <code>form</code> tag.
                </div>
                <h4>Properties</h4>
                <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Default</th>
                        <th>Description</th>
                        <th class="not-for-mobile">Demonstration</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>data-validate</code></td>
                        <td></td>
                        <td>Bind Parsley validation to the form and its items with validation constraints</td>
                        <td  class="not-for-mobile"></td>
                    </tr>
                    <tr>
                        <td><code>data-show-errors</code></td>
                        <td>true</td>
                        <td>Choose to show or not Parsley error messages & success / errors classes</td>
                        <td  class="not-for-mobile"></td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-focus</code>
                        </td>
                        <td>
                            first
                        </td>
                        <td>
                            Specify which field will be focused first on form validation errors. <code>first</code>, <code>last</code> and <code>none</code> allowed
                        </td>
                        <td class="not-for-mobile">
                            <table>
                                <tr>
                                    <td>
                                        <form data-validate="parsley" id="focus-form" data-focus="last">
                                            <p><input type="text" data-type="email" data-required="true" placeholder="won't have focus" /><p>
                                            <p><input type="text" data-type="email" data-required="true" placeholder="will have focus" /></p>
                                        </form>
                                    </td>
                                    <td>
                                        <span class="btn btn-small" onclick="javascript:$('#focus-form').parsley('validate');">
                                            <i class="icon-ok"></i>
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                </tbody>
            </table>
            </section>
            <a href="#top" class="top pull-right">Top</a>

            <!-- //////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <section>
                <a name="parsleyfield"></a>
                <h3>Parsley Field</h3>
                <p>Once your form is validated by Parsley, add validation constraints and various other options.</p>
<pre><code>&lt;form data-validate="parsley">
    &lt;input type="text" name="email" data-type="email" />
&lt;/form></code></pre>
                <h4>Properties</h4>
                <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Default</th>
                        <th>Description</th>
                        <th class="not-for-mobile">Demonstration</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <code>data-trigger</code>
                        </td>
                        <td>none</td>
                        <td>Specify one or many javascript events that will trigger item validation. eg: <code>data-trigger="change"</code>. To set multiple events, separate them by a space <code>data-trigger="focusin focusout"</code>.<br/><a href="http://api.jquery.com/category/events/">See the various events supported by jQuery.</a></td>
                        <td  class="not-for-mobile">
                            <form data-validate="parsley">
                                <p><input type="text" data-type="email" data-trigger="keyup" data-validation-minlength="0" placeholder="keyup validation trigger" /><p>
                                <p><input type="text" data-type="email" data-trigger="change" data-validation-minlength="0" placeholder="change validation trigger" /></p>
                                <input type="checkbox" name="mincheckdemo[]" data-mincheck="2" value="foo" data-trigger="change" />
                                <input type="checkbox" name="mincheckdemo[]" value="bar" />
                                <input type="checkbox" name="mincheckdemo[]" value="baz" />
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-value</code>
                        </td>
                        <td>

                        </td>
                        <td>
                            Override the value attribute of a form field. Useful for file inputs, where you're not allowed to
                            set a value. <br/>
                            eg: <code>data-value="uploadedfile.png"</code>
                        </td>
                        <td class="not-for-mobile">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-validation-minlength</code>
                        </td>
                        <td>
                            3
                        </td>
                        <td>
                            Specify how many characters need to be input before the the validation process fires.<br/>
                            eg: <code>data-validation-minlength="4"</code>
                        </td>
                        <td class="not-for-mobile">
                            <form data-validate="parsley">
                                <p><input type="text" data-type="email" data-trigger="keyup" placeholder="default keyup validation" /><p>
                                <p><input type="text" data-type="email" data-trigger="keyup" data-validation-minlength="8" placeholder="8 chars keyup validation" /></p>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-error-message</code>
                        </td>
                        <td>

                        </td>
                        <td>
                            Customize a unique global message for this field. Shown if one constraint fails.
                            <br/>eg: <pre><code>data-type="alphanum" data-rangelength="[10,10]"
data-message="You must enter a 10 characters alphanumeric value"</code></pre>
                        </td>
                        <td class="not-for-mobile">
                            <form data-validate="parsley">
                                <p><input type="text" data-type="alphanum" data-rangelength="[10,10]" data-trigger="keyup" data-error-message="You must enter a 10 characters alphanumeric value" placeholder="custom error message" /><p>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-error-container</code>
                        </td>
                        <td>

                        </td>
                        <td>
                            <span style="color:red; !important" id="demoerrorcontainer"></span>
                            Specify here the container where Parsley should set the errors.
                            <br/>eg: <pre><code>data-error-container="ul#myproperlabel li.someclass"</code></pre>
                        </td><commit_msg>Update documentation.html<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Parsley.js Documentation & API</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="Keywords" content="javascript form validation, javascript, form, validation, jquery, plungin, html, UX">
    <meta name="description" content="Parsley is a dead simple javascript form validation, powerful and UX aware">
    <meta name="author" content="<NAME>">

    <!-- Le styles -->
    <link href="components/bootstrap/docs/assets/css/bootstrap.css" rel="stylesheet" />
    <link href="http://yandex.st/highlightjs/7.3/styles/github.min.css" rel="stylesheet" />
    <style type="text/css">
      body {
        padding-top: 20px;
        padding-bottom: 40px;
      }
      h3.muted {
          color: #08C;
      }
      /* Custom container */
      .container-narrow {
        margin: 0 auto;
        max-width: 940px;
      }
      .container-narrow > hr {
        margin: 30px 0;
      }

      /* Main marketing message and sign up button */
      .jumbotron {
        margin: 60px 0;
        text-align: center;
      }
      .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
      }
      .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
      }
      section {
          margin-bottom: 45px;
      }
      form {
          margin: 0;
      }
      input.parsley-success, textarea.parsley-success {
        color: #468847 !important;
        background-color: #DFF0D8 !important;
        border: 1px solid #D6E9C6 !important;
      }
      input.parsley-error, textarea.parsley-error {
        color: #B94A48 !important;
        background-color: #F2DEDE !important;
        border: 1px solid #EED3D7 !important;
      }
      input {
          width: 150px;
          margin: 0 2px !important;
      }
      ul.parsley-error-list {
          font-size: 11px;
          margin: 2px;
          list-style-type:none;
      }
      ul.parsley-error-list li {
          line-height: 11px;
      }
      .social-buttons {
          padding: 5px 20px;
      }
      h3 {
          color: #FB4006;
      }

      .container-narrow > hr {
        margin:15px 0 0 0;
      }

      @media only screen
      and (min-device-width : 320px)
      and (max-device-width : 480px) {
          .not-for-mobile {
              display: none;
          }
      }
    </style>
    <link href="components/bootstrap/docs/assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

      <a href="https://github.com/guillaumepotier/Parsley.js"><img style="position: fixed; top: 0; right: 0; border: 0; z-index:9999" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>

      <div class="container-narrow">

          <div class="masthead">
            <ul class="nav nav-pills pull-right">
              <li><a href="index.html">Home</a></li>
              <li class="active"><a href="documentation.html">Documentation</a></li>
              <li><a href="doc/api/index.html" target="_blank">API</a></li>
            </ul>
            <h3 class="muted">
                Parsley.js

                <span class="social-buttons inline-block">
                    <a href="https://twitter.com/share" class="twitter-share-button" data-related="garlicjs: auto persist form values to avoid data loss,guillaumepotier" data-url="http://parsleyjs.org" data-lang="en" data-text="Parsley.js: never write a single javascript line anymore to validate your forms FrontEnd. #ui #ux #javascript"></a>
                    <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

                    <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

                    <iframe src="http://ghbtns.com/github-btn.html?user=guillaumepotier&repo=Parsley.js&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="110" height="20"></iframe>

                </span>

            </h3>
          </div>

        <hr>

        <div class="row-fluid marketing">
            <h2>Demonstration</h2>

                <a name="parsleydemoform"></a>
                <table id="demonstration-form" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr>
                            <th width="27%">Classy demo</th>
                            <th width="73%" class="not-for-mobile">HTML Code (yes, no JS !)</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>
                                <form id="demo-form">
                                    <label for="fullname">Full Name * :</label>
                                    <input type="text" id="fullname" name="fullname" data-required="true" />

                                    <label for="email">Email * :</label>
                                    <input type="text" id="email" name="email" data-type="email" data-trigger="change" data-required="true" />

                                    <label for="website">Website :</label>
                                    <input type="text" id="website" name="website" data-trigger="change" data-type="url" />

                                    <label for="message">Message (20 chars min, 200 max) :</label>
                                    <textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]"></textarea>

                                    <input type="hidden" name="superhidden" id="superhidden">
                                    <br/><span class="btn btn" id="demo-form-valid" onclick="javascript:$('#demo-form').parsley( 'validate' );"><i class="icon-ok"></i></span>
                                </form>
                                <small>Please, note that this demo form is not a perfect example of UX-awareness. The aim here is to show a quick overview of data-API and Parsley customizable behavior.</small>
                            </td>
                            <td class="not-for-mobile">
<pre><code>&lt;form id="demo-form" data-validate="parsley">
    &lt;label for="fullname">Full Name * :&lt;/label>
    &lt;input type="text" id="fullname" name="fullname" data-required="true" />

    &lt;label for="email">Email * :&lt;/label>
    &lt;input type="text" id="email" name="email" data-trigger="change" data-required="true" data-type="email" />

    &lt;label for="website">Website :&lt;/label>
    &lt;input type="text" id="website" name="website" data-trigger="change" data-type="url" />

    &lt;label for="message">Message (20 chars min, 200 max) :&lt;/label>
    &lt;textarea id="message" name="message" data-trigger="keyup" data-rangelength="[20,200]">&lt;/textarea>
&lt;/form></code></pre>
                            </td>
                        </tr>
                </table>

                <div class="alert alert-block alert-info">
                <span class="label label-important">Heads up!</span> <strong>Le #UX touch</strong>:
                <ul>
                    <li>
                        <strong>Min char validation</strong>: Parsley by default <strong>does not proceed with field validation when less than 3 chars have been input</strong>. Do not assault your users with error messages to soon! <i>(this behavior is configurable)</i>.
                    </li>
                    <li>
                        <strong>Quick error removal</strong>: when a field is detected and shown as invalid, further checks are done on each keypress to try to <strong>quickly remove error messages once the field is ok</strong>.
                    </li>
                    <li>
                        <strong>Control focusing on error</strong>: on form submission, the first error field is focused to <strong>allow the user to easily start fixing errors</strong>. <i>(this behavior is configurable)</i>
                    </li>
                </ul>
                </div>

                <hr>

            <a name="top"></a>
            <h2>Documentation</h2>

            <ol>
                <li><a href="#installation"><strong>Installation &amp; usage</strong>: one or two inclusions!</a></li>
                <li><a href="#parsleyform"><strong>Parsley Form</strong>: add some Parsley validation to your forms!</a></li>
                <li><a href="#parsleyfield"><strong>Parsley Field</strong>: customize each validated field validation behavior </a></li>
                <li>
                  <a href="#validators"><strong>Validators</strong>: learn the various validations you could do with Parsley</a>
                  <ol>
                      <li><a href="#basic-constraints">Basic constraints</a></li>
                      <li><a href="#type-constraints">Type constraints</a></li>
                      <li><a href="#extra-constraints">Extra constraints</a></li>
                  </ol>
                </li>
                <li>
                    <a href="#javascript"><strong>Javascript</strong>: yes, you still can do some javascript with Parsley. Intermediate level only!</a>
                    <ol>
                          <li><a href="#javascript-general">General</a></li>
                          <li><a href="#javascript-form">Form</a></li>
                          <li><a href="#javascript-fields">Fields</a></li>
                      </ol>
                </li>
                <li>
                    <a href="#parsleyclasses"><strong>Parsley CSS</strong>: last but not least, Parsley CSS classes</a>
                </li>
                <li>
                    <a href="#plugins-and-localization"><strong>Plugins &amp; Localization</strong>: extend Parsley messages, validators, templates and more!</a>
                </li>
                <li>
                  <a href="#integrations"><strong>Integrations</strong>: Use parsley from other frameworks.
                </li>
            </ol>

            <hr>

            <!-- //////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <section>
              <a name="installation"></a>
              <h3>Parsley Installation</h3>
              <p>Just include the <a href="https://github.com/guillaumepotier/Parsley.js/blob/master/dist/parsley.min.js">Parsley.js</a> file (with <a href="http://jquery.com/">jQuery</a> or <a href="http://zeptojs.com/">Zepto</a> with <strong><a href="https://github.com/madrobby/zepto#building">data and fx_methods modules</a></strong> added) or use <a href="https://github.com/guillaumepotier/Parsley.js/blob/master/dist/parsley-standalone.min.js">Parsley standalone</a> (with Zepto bundled inside)</p>
<pre><code>&lt;script type="text/javascript" src="jquery.js">&lt;/script>
&lt;script type="text/javascript" src="parsley.js">&lt;/script>

&lt;form data-validate="parsley">
  [...]
&lt;/form></code></pre>
            </section>
            <a href="#top" class="top pull-right">Top</a>

            <!-- //////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <section>
                <a name="parsleyform"></a>
                <h3>Parsley Form</h3>
                <p>This is the main Parsley form validation factory, where you decide if a form is validated, and set some extra options.</p>
                <pre><code>&lt;form data-validate="parsley">&lt;/form></code></pre>
                 <div class="alert alert-block alert-info">
                <span class="label label-important">Heads up!</span> <strong>HTML5</strong>:
                If you use HTML5 validation feature, add: <code>novalidate</code> attribute to <code>form</code> tag.
                </div>
                <h4>Properties</h4>
                <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Default</th>
                        <th>Description</th>
                        <th class="not-for-mobile">Demonstration</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><code>data-validate</code></td>
                        <td></td>
                        <td>Bind Parsley validation to the form and its items with validation constraints</td>
                        <td  class="not-for-mobile"></td>
                    </tr>
                    <tr>
                        <td><code>data-show-errors</code></td>
                        <td>true</td>
                        <td>Choose to show or not Parsley error messages & success / errors classes</td>
                        <td  class="not-for-mobile"></td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-focus</code>
                        </td>
                        <td>
                            first
                        </td>
                        <td>
                            Specify which field will be focused first on form validation errors. <code>first</code>, <code>last</code> and <code>none</code> allowed
                        </td>
                        <td class="not-for-mobile">
                            <table>
                                <tr>
                                    <td>
                                        <form data-validate="parsley" id="focus-form" data-focus="last">
                                            <p><input type="text" data-type="email" data-required="true" placeholder="won't have focus" /><p>
                                            <p><input type="text" data-type="email" data-required="true" placeholder="will have focus" /></p>
                                        </form>
                                    </td>
                                    <td>
                                        <span class="btn btn-small" onclick="javascript:$('#focus-form').parsley('validate');">
                                            <i class="icon-ok"></i>
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>

                </tbody>
            </table>
            </section>
            <a href="#top" class="top pull-right">Top</a>

            <!-- //////////////////////////////////////////////////////////////////////////////////////////////////// -->
            <section>
                <a name="parsleyfield"></a>
                <h3>Parsley Field</h3>
                <p>Once your form is validated by Parsley, add validation constraints and various other options.</p>
<pre><code>&lt;form data-validate="parsley">
    &lt;input type="text" name="email" data-type="email" />
&lt;/form></code></pre>
                <h4>Properties</h4>
                <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th>Property</th>
                        <th>Default</th>
                        <th>Description</th>
                        <th class="not-for-mobile">Demonstration</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <code>data-trigger</code>
                        </td>
                        <td>none</td>
                        <td>Specify one or many javascript events that will trigger item validation. eg: <code>data-trigger="change"</code>. To set multiple events, separate them by a space <code>data-trigger="focusin focusout"</code>.<br/><a href="http://api.jquery.com/category/events/">See the various events supported by jQuery.</a></td>
                        <td  class="not-for-mobile">
                            <form data-validate="parsley">
                                <p><input type="text" data-type="email" data-trigger="keyup" data-validation-minlength="0" placeholder="keyup validation trigger" /><p>
                                <p><input type="text" data-type="email" data-trigger="change" data-validation-minlength="0" placeholder="change validation trigger" /></p>
                                <input type="checkbox" name="mincheckdemo[]" data-mincheck="2" value="foo" data-trigger="change" />
                                <input type="checkbox" name="mincheckdemo[]" value="bar" />
                                <input type="checkbox" name="mincheckdemo[]" value="baz" />
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-value</code>
                        </td>
                        <td>

                        </td>
                        <td>
                            Override the value attribute of a form field. Useful for file inputs, where you're not allowed to
                            set a value. <br/>
                            eg: <code>data-value="uploadedfile.png"</code>
                        </td>
                        <td class="not-for-mobile">
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-validation-minlength</code>
                        </td>
                        <td>
                            3
                        </td>
                        <td>
                            Specify how many characters need to be input before the the validation process fires.<br/>
                            eg: <code>data-validation-minlength="4"</code>
                        </td>
                        <td class="not-for-mobile">
                            <form data-validate="parsley">
                                <p><input type="text" data-type="email" data-trigger="keyup" placeholder="default keyup validation" /><p>
                                <p><input type="text" data-type="email" data-trigger="keyup" data-validation-minlength="8" placeholder="8 chars keyup validation" /></p>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-error-message</code>
                        </td>
                        <td>

                        </td>
                        <td>
                            Customize a unique global message for this field. Shown if one constraint fails.
                            <br/>eg: <pre><code>data-type="alphanum" data-rangelength="[10,10]"
data-error-message="You must enter a 10 characters alphanumeric value"</code></pre>
                        </td>
                        <td class="not-for-mobile">
                            <form data-validate="parsley">
                                <p><input type="text" data-type="alphanum" data-rangelength="[10,10]" data-trigger="keyup" data-error-message="You must enter a 10 characters alphanumeric value" placeholder="custom error message" /><p>
                            </form>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <code>data-error-container</code>
                        </td>
                        <td>

                        </td>
                        <td>
                            <span style="color:red; !important" id="demoerrorcontainer"></span>
                            Specify here the container where Parsley should set the errors.
                            <br/>eg: <pre><code>data-error-container="ul#myproperlabel li.someclass"</code></pre>
                        </td>
{'fraction_non_alphanumeric': 0.14975163144053766, 'fraction_numerical': 0.008765949157494887, 'mean_word_length': 1.3540639688180671, 'pattern_counts': {'":': 0, '<': 973, '<?xml version=': 0, '>': 1029, 'https://': 12, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 48, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3172783', 'n_tokens_mistral': 11185, 'n_tokens_neox': 10364, 'n_words': 2360}