<commit_before><!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vee Validate</title>
        <link rel="stylesheet" href="assets/bundle.css">
    </head>
    <body>
        <div id="app">
            <app heading="Vee-Validate" subtitle="Simple VueJS Form Validation">
                <h2 id="about" class="content-subhead"><a href="#about">What is vee-validate?</a></h2>
                <p>
                    This is a lightweight plugin for <a href="https://vuejs.org/" class="link">VueJS</a> that allows you to validate input fields, and display errors.
                    <br><br>
                    You don't have to do anything fancy in your app, most of the work goes into the html,
                    You only need to specify for each input what kind of validators should be used when the value changes. You will then get informed of the errors for each field.
                    <br><br>
                    Although most of the validations occur automatically, you can use the validator however you see fit. The validator object has no dependencies and is a standalone object.
                    <br><br>
                    Currently there are over 20 validation rules available in the plugin.
                    This plugin is inspired by <a href="https://laravel.com/" class="link">PHP Framework Laravel's validation syntax</a>.
                    <br><br>It also supports Vue 2.0, All examples here are built using Vue 2.0 with the plugin.
                </p>
                <h2 id="installation" class="content-subhead"><a href="#installation">Installation</a></h2>
                <p>
                    <b>Vue 1.x</b>
                    <code-block class="language-bash">npm install vee-validate --save</code-block>
                    <b>Vue 2.x</b>
                    <code-block class="language-bash">npm install vee-validate@next --save</code-block>
                    <div class="note">
                        <b>Note:</b> The latest version of this plugin will keep pointing to the Vue 1.x version, until Vue 2.0 is released which is soon, then the latest will point to Vue 2.0 while another tag will be used for the Vue 1.x versions.
                    </div>
                    <br>

                    Then you may use it like this:
                    <code-block class="language-html">
                        &lt;script src=&quot;path/to/vue.js&quot;&gt;&lt;/script&gt;
                        &lt;script src=&quot;path/to/vee-validate.js&quot;&gt;&lt;/script&gt;
                        &lt;script&gt;
                            Vue.use(VeeValidate); // good to go.
                        &lt;/script&gt;
                    </code-block>

                    or you may import it using ES6:
                    <code-block class="language-javascript">
                        import Vue from 'vue';
                        import VeeValidate from 'vee-validate';

                        Vue.use(VeeValidate);
                    </code-block>
                </p>
                <h2 id="basic-example" class="content-subhead"><a href="#basic-example">Basic Example</a></h2>
                <p>
                    All you need is to add the <code class="inline">v-validate</code> directive to the input you wish to validate.
                    <br><br>
                    Then Add a <code class="inline">data-rules</code> attribute which contains a list of validation rules separated by a pipe '<code class="inline">|</code>'.
                    For the following example the validation rules are straight forward, use <code class="inline">required</code> to indicate that the field is required.
                    And <code class="inline">email</code> to indicate that the field must be an email.
                    To combine both rules we assign the value <code class="inline">required|email</code> to the <code class="inline">data-rules</code> data-set attribute.
                </p>
                <basic-example></basic-example>
                <div class="flex-center"><a class="link" href="examples.html">More Examples</a></div>
                <br>
                <div class="note">
                    <b>Note:</b> The field name that appears in the error messages is usually the input's <code>name</code> attribute, unless you passed a value from the vue instance <code>$data</code> object,
                    The name will be then the expression name, check the <a href="examples.html#validate-data-example">data validation example</a>.
                </div>
                <h2 id="render-errors" class="content-subhead"><a href="#render-errors">Rendering Errors</a></h2>
                <p>
                    Naturally, you would want to display the errors to your users, The plugin augments your Vue instance with a private validator object and a public errors data object.
                    You are responsible for how the errors should be rendered.
                    <br><br>The errors object exposes a simple methods to help you render errors:
                    <ul>
                        <li><code class="inline">first('field')</code> Fetches the first error message associated with that field.</li>
                        <li><code class="inline">collect('field')</code> Fetches all error messages associated with that field.</li>
                        <li><code class="inline">has('field')</code> Checks if there are any errors associated with that field.</li>
                        <li><code class="inline">all()</code> Gets all error messages.</li>
                    </ul>
                    There are a few more <a class="link" href="api.html#error-bag">methods</a> that you can use to manipulate the errors object.
                </p>
                <h2 id="available-rules" class="content-subhead"><a href="#available-rules">Available Rules</a></h2>
                <p>There are more than 20 rules available to validate your inputs:</p>
                <div class="pure-g">
                    <div v-for="group in rules" :class="'pure-u-1-' + rules.length">
                        <ul>
                            <li v-for="rule in group"><a class="link" :href="'rules.html#rule-' + rule">{{ rule }}</a></li>
                        </ul>
                    </div>
                </div>
                <p>Visit the <a class="link" href="rules.html#available-rules">rules documentation</a> to learn more about how to use each rule, and how to <a href="rules.html#custom-rules" class="link">create your own</a>.</p>
                <h2 id="configuration" class="content-subhead"><a href="#configuration">Configuration</a></h2>
                <p>
                    You may need to configure some options to tweak some of the plugin internals, this is not required, but could cause conflicts. For example: if you are using a property called <code class="inline">errors</code> on your vue instance this may cause conflicts.
                     here is how you would set up the options along with the default values:<commit_msg>Add missing methods to error bag docs<commit_after><!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Vee Validate</title>
        <link rel="stylesheet" href="assets/bundle.css">
    </head>
    <body>
        <div id="app">
            <app heading="Vee-Validate" subtitle="Simple VueJS Form Validation">
                <h2 id="about" class="content-subhead"><a href="#about">What is vee-validate?</a></h2>
                <p>
                    This is a lightweight plugin for <a href="https://vuejs.org/" class="link">VueJS</a> that allows you to validate input fields, and display errors.
                    <br><br>
                    You don't have to do anything fancy in your app, most of the work goes into the html,
                    You only need to specify for each input what kind of validators should be used when the value changes. You will then get informed of the errors for each field.
                    <br><br>
                    Although most of the validations occur automatically, you can use the validator however you see fit. The validator object has no dependencies and is a standalone object.
                    <br><br>
                    Currently there are over 20 validation rules available in the plugin.
                    This plugin is inspired by <a href="https://laravel.com/" class="link">PHP Framework Laravel's validation syntax</a>.
                    <br><br>It also supports Vue 2.0, All examples here are built using Vue 2.0 with the plugin.
                </p>
                <h2 id="installation" class="content-subhead"><a href="#installation">Installation</a></h2>
                <p>
                    <b>Vue 1.x</b>
                    <code-block class="language-bash">npm install vee-validate --save</code-block>
                    <b>Vue 2.x</b>
                    <code-block class="language-bash">npm install vee-validate@next --save</code-block>
                    <div class="note">
                        <b>Note:</b> The latest version of this plugin will keep pointing to the Vue 1.x version, until Vue 2.0 is released which is soon, then the latest will point to Vue 2.0 while another tag will be used for the Vue 1.x versions.
                    </div>
                    <br>

                    Then you may use it like this:
                    <code-block class="language-html">
                        &lt;script src=&quot;path/to/vue.js&quot;&gt;&lt;/script&gt;
                        &lt;script src=&quot;path/to/vee-validate.js&quot;&gt;&lt;/script&gt;
                        &lt;script&gt;
                            Vue.use(VeeValidate); // good to go.
                        &lt;/script&gt;
                    </code-block>

                    or you may import it using ES6:
                    <code-block class="language-javascript">
                        import Vue from 'vue';
                        import VeeValidate from 'vee-validate';

                        Vue.use(VeeValidate);
                    </code-block>
                </p>
                <h2 id="basic-example" class="content-subhead"><a href="#basic-example">Basic Example</a></h2>
                <p>
                    All you need is to add the <code class="inline">v-validate</code> directive to the input you wish to validate.
                    <br><br>
                    Then Add a <code class="inline">data-rules</code> attribute which contains a list of validation rules separated by a pipe '<code class="inline">|</code>'.
                    For the following example the validation rules are straight forward, use <code class="inline">required</code> to indicate that the field is required.
                    And <code class="inline">email</code> to indicate that the field must be an email.
                    To combine both rules we assign the value <code class="inline">required|email</code> to the <code class="inline">data-rules</code> data-set attribute.
                </p>
                <basic-example></basic-example>
                <div class="flex-center"><a class="link" href="examples.html">More Examples</a></div>
                <br>
                <div class="note">
                    <b>Note:</b> The field name that appears in the error messages is usually the input's <code>name</code> attribute, unless you passed a value from the vue instance <code>$data</code> object,
                    The name will be then the expression name, check the <a href="examples.html#validate-data-example">data validation example</a>.
                </div>
                <h2 id="render-errors" class="content-subhead"><a href="#render-errors">Rendering Errors</a></h2>
                <p>
                    Naturally, you would want to display the errors to your users, The plugin augments your Vue instance with a private validator object and a public errors data object.
                    You are responsible for how the errors should be rendered.
                    <br><br>The errors object exposes a simple methods to help you render errors:
                    <ul>
                        <li><code class="inline">first('field')</code> Fetches the first error message associated with that field.</li>
                        <li><code class="inline">collect('field')</code> Fetches all error messages associated with that field. alternativly you can pass nothing and it will return errors grouped by fields</li>
                        <li><code class="inline">has('field')</code> Checks if there are any errors associated with that field.</li>
                        <li><code class="inline">all()</code> Gets all error messages.</li>
                        <li><code class="inline">any()</code> Checks if there are any errors.</li>
                    </ul>
                    There are a few more <a class="link" href="api.html#error-bag">methods</a> that you can use to manipulate the errors object.
                </p>
                <h2 id="available-rules" class="content-subhead"><a href="#available-rules">Available Rules</a></h2>
                <p>There are more than 20 rules available to validate your inputs:</p>
                <div class="pure-g">
                    <div v-for="group in rules" :class="'pure-u-1-' + rules.length">
                        <ul>
                            <li v-for="rule in group"><a class="link" :href="'rules.html#rule-' + rule">{{ rule }}</a></li>
                        </ul>
                    </div>
                </div>
                <p>Visit the <a class="link" href="rules.html#available-rules">rules documentation</a> to learn more about how to use each rule, and how to <a href="rules.html#custom-rules" class="link">create your own</a>.</p>
                <h2 id="configuration" class="content-subhead"><a href="#configuration">Configuration</a></h2>
                <p>
                    You may need to configure some options to tweak some of the plugin internals, this is not required, but could cause conflicts. For example: if you are using a property called <code class="inline">errors</code> on your vue instance this may cause conflicts.
                     here is how you would set up the options along with the default values:
{'fraction_non_alphanumeric': 0.11130266878146335, 'fraction_numerical': 0.004413488724915523, 'mean_word_length': 1.86770812734823, 'pattern_counts': {'":': 0, '<': 305, '<?xml version=': 0, '>': 305, 'https://': 4, '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': '4696624', 'n_tokens_mistral': 3767, 'n_tokens_neox': 3524, 'n_words': 1330}