<commit_before>﻿<!DOCTYPE html>
<html>

<head>
    <title>vue-form example</title>
    <meta charset="utf-8" />
    <style>
        label {
            display: block;
            margin-bottom: 1.5em;
        }
        
        label > span {
            display: inline-block;
            width: 8em;
            vertical-align: top;
        }
    </style>
</head>

<body>

    <form v-form name="myform" @submit.prevent="onSubmit">
        
        <div class="errors" v-if="myform.$submitted">
            <p v-if="myform.name.$error.required">Name is required.</p>
            <p v-if="myform.email.$error.email">Email is not valid.</p>
        </div>

        <label>
            <span>Name *</span>
            <input v-model="model.name" v-form-ctrl required name="name" />
        </label>

        <label>
            <span>Email</span>
            <input v-model="model.email" v-form-ctrl name="email" type="email" />
        </label>

        <label>
            <span>Request call back</span>
            <input v-model="model.contactRequired" v-form-ctrl name="contactRequired" type="checkbox" />
        </label>

        <label>
            <span>Contact details <span v-if="model.contactRequired">*</span></span>
            <textarea v-model="model.contact" :required="model.contactRequired" v-form-ctrl name="comments"></textarea>
        </label>
        
        <div v-if="model.contactRequired">
            <p>Extra contact fields</p>
            
            <label>
                <span>3 digit code *</span>
                <input v-model="model.code" v-form-ctrl name="code" type="text" pattern="[A-Za-z]{3}" required />
            </label>
            
        </div>
        
        <button type="submit">Submit</button>
    </form>

    <pre>{{ myform | json }}</pre>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../vue-form.js"></script>

    <script>
        //Vue.config.silent = true;
        var vm = new Vue({
            el: 'body',
            data: {
                myform: {},
                isRequired: true,
                form2Enabled: false,
                model: {
                    contactRequired: false              
                }
            },
            components: {                
                customControl: {
                    replace: true,
                    props: ['model'],
                    template: '<div>Custom control here</div>',
                    ready: function () {
                                                
                    }
                }                
            },
            methods: {
                customValidator: function (value) {
                    return value === 'custom';
                }, 
                toggleRequired: function () {
                    this.isRequired = !this.isRequired;
                },        
                onSubmit: function () {
                    console.log(this.myform.$valid);
                }
            }
        });
    </script>

</body>

</html><commit_msg>clean up example<commit_after>﻿<!DOCTYPE html>
<html>

<head>
    <title>vue-form example</title>
    <meta charset="utf-8" />
    <style>
        label {
            display: block;
            margin-bottom: 1.5em;
        }
        
        label > span {
            display: inline-block;
            width: 8em;
            vertical-align: top;
        }
    </style>
</head>

<body>

    <form v-form name="myform" @submit.prevent="onSubmit">
        
        <div class="errors" v-if="myform.$submitted">
            <p v-if="myform.name.$error.required">Name is required.</p>
            <p v-if="myform.email.$error.email">Email is not valid.</p>
        </div>

        <label>
            <span>Name *</span>
            <input v-model="model.name" v-form-ctrl required name="name" />
        </label>

        <label>
            <span>Email</span>
            <input v-model="model.email" v-form-ctrl name="email" type="email" />
        </label>

        <label>
            <span>Request call back</span>
            <input v-model="model.contactRequired" v-form-ctrl name="contactRequired" type="checkbox" />
        </label>

        <label>
            <span>Contact details <span v-if="model.contactRequired">*</span></span>
            <textarea v-model="model.contact" :required="model.contactRequired" v-form-ctrl name="comments"></textarea>
        </label>
        
        <div v-if="model.contactRequired">
            <p>Extra contact fields</p>
            
            <label>
                <span>3 digit code *</span>
                <input v-model="model.code" v-form-ctrl name="code" type="text" pattern="[A-Za-z]{3}" required />
            </label>
            
        </div>
        
        <button type="submit">Submit</button>
    </form>

    <pre>{{ myform | json }}</pre>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../vue-form.js"></script>

    <script>
        var vm = new Vue({
            el: 'body',
            data: {
                myform: {},
                model: {
                    contactRequired: false              
                }
            },
            methods: {     
                onSubmit: function () {
                    console.log(this.myform.$valid);
                }
            }
        });
    </script>

</body>

</html>
{'fraction_non_alphanumeric': 0.14861367837338263, 'fraction_numerical': 0.002402957486136784, 'mean_word_length': 1.288917089678511, 'pattern_counts': {'":': 0, '<': 129, '<?xml version=': 0, '>': 131, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '464480', 'n_tokens_mistral': 1558, 'n_tokens_neox': 1486, 'n_words': 287}