<commit_before>/** @jsx React.DOM */
define([
    'underscore', 'react', 'jquery', 'wingspan-forms',
    'SimpleFormMetadata'
], function (_, React, $, Forms, SimpleFormMetadata) {
    'use strict';


    var MyForm = React.createClass({

        genderOptions: [{ value: 'male', label: 'Male'}, { value: 'female', label: 'Female'}],

        getInitialState: function () {
            return {
                firstName: '',
                lastName: '',
                gender: ''
            };
        },

        render: function () {
            return (
                <div className="MyForm">
                    <div>
                        <div>
                            <FormField fieldInfo={SimpleFormMetadata.firstName}>
                                <KendoText value={this.state.firstName} onChange={_.partial(this.onFieldChange, 'firstName')} />
                            </FormField>

                            <FormField fieldInfo={SimpleFormMetadata.lastName}>
                                <KendoText value={this.state.lastName} onChange={_.partial(this.onFieldChange, 'lastName')} />
                            </FormField>

                            <FormField fieldInfo={SimpleFormMetadata.gender}>
                                <KendoComboBox
                                    dataSource={this.genderOptions}
                                    displayField="label"
                                    valueField="value"
                                    value={this.state.gender}
                                    onChange={_.partial(this.onFieldChange, 'gender')} />
                            </FormField>
                        </div>
                        <pre>{JSON.stringify(this.state, undefined, 2)}</pre>
                    </div>
                </div>
            );
        },

        onFieldChange: function (fieldName, value) {
            this.setState(_.object([[fieldName, value]]));
        }
    });


    function entrypoint(rootEl) {
        React.renderComponent(<MyForm/>, rootEl);
    }


    var FormField = Forms.FormField;<commit_msg>add simple validation<commit_after>/** @jsx React.DOM */
define([
    'underscore', 'react', 'jquery', 'wingspan-forms',
    'SimpleFormMetadata'
], function (_, React, $, Forms, SimpleFormMetadata) {
    'use strict';


    var MyForm = React.createClass({

        genderOptions: [{ value: 'male', label: 'Male'}, { value: 'female', label: 'Female'}],

        getInitialState: function () {
            return {
                firstName: '',
                lastName: '',
                gender: ''
            };
        },

        render: function () {
            return (
                <div className="MyForm">
                    <div>
                        <div>
                            <FormField fieldInfo={SimpleFormMetadata.firstName} isValid={this.isFieldValid('firstName')}>
                                <KendoText value={this.state.firstName} onChange={_.partial(this.onFieldChange, 'firstName')} />
                            </FormField>

                            <FormField fieldInfo={SimpleFormMetadata.lastName} isValid={this.isFieldValid('lastName')}>
                                <KendoText value={this.state.lastName} onChange={_.partial(this.onFieldChange, 'lastName')} />
                            </FormField>

                            <FormField fieldInfo={SimpleFormMetadata.gender} isValid={this.isFieldValid('gender')}>
                                <KendoComboBox
                                    dataSource={this.genderOptions}
                                    displayField="label"
                                    valueField="value"
                                    value={this.state.gender}
                                    onChange={_.partial(this.onFieldChange, 'gender')} />
                            </FormField>
                        </div>
                        <pre>{JSON.stringify(this.state, undefined, 2)}</pre>
                    </div>
                </div>
            );
        },

        onFieldChange: function (fieldName, value) {
            this.setState(_.object([[fieldName, value]]));
        },

        isFieldValid: function (fieldName) {
            return _.isEmpty(this.state[fieldName])
                ? [false, 'This field is required.']
                : [true, ''];
        }
    });


    function entrypoint(rootEl) {
        React.renderComponent(<MyForm/>, rootEl);
    }


    var FormField = Forms.FormField;
{'fraction_non_alphanumeric': 0.1226643218289734, 'fraction_numerical': 0.00043965706748735987, 'mean_word_length': 1.2784176264396594, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 10, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2476178', 'n_tokens_mistral': 1143, 'n_tokens_neox': 1071, 'n_words': 181}