Goten Form

Goten Form is a react component that facilitates the validation of the Goten components.

Index

• Install
• Usage
• Example of use
• Props
• Methods
• Contributions

Install

npm install -s goten-react-form

Usage

var GotenForm = require('goten-react-form').GotenForm; // ES5
 
import { GotenForm } from 'goten-react-form'; // ES6


<GotenForm
    onSuccess = {() => console.log("onSuccessMethod")}
/>
    <Component1>
        <GotenComponent/>
    </Component1>
    <GotenComponent/>
    <Component2/>
</GotenForm>

Example of use

With buttonComponent

import React, { Component } from 'react'
import { GotenTextField } from 'goten-react-text-field'
import { GotenForm } from 'goten-react-from'

export default class App extends Component {
    render() {
        return (
            <GotenForm
                onSuccess = {()=> console.log("SUCCESS")}
                onError = {() => console.log("ERROR")}
                buttonComponent = {
                    <input
                        type='submit'
                        value='Validate Form'
                    />
                }
            >
                <div className='title'>TITLE</div>
                <table>
                    <tbody>
                        <tr>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    label={'Date Pattern'}
                                    type={'text'}
                                    pattern={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    errorMessage={'Please inset a text using the correct pattern'}
                                    errorRequiredMessage={'This field is required'}
                                    required={true}
                                    showError={true}
                                />
                            </th>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'Insert a email'}
                                    label={'Email'}
                                    type={'email'}
                                    showError={true}
                                />
                            </th>
                        </tr>
                    </tbody>
                </table>
            </GotenForm>
        )
    }
}

Without buttonComponent

import React, { Component } from 'react'
import { GotenTextField } from 'goten-react-text-field'
import { GotenForm } from 'goten-react-from'

export default class App extends Component {
    this.refForm = React.createRef()

    render() {
        return (
            <GotenForm
                onSuccess = {() => console.log("SUCCESS")}
                onError = {() => console.log("ERROR")}
                ref = {this.refForm}
            >
                <div className='title'>TITLE</div>
                <table>
                    <tbody>
                        <tr>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    label={'Date Pattern'}
                                    type={'text'}
                                    pattern={'[0-9]{2}\/[0-9]{2}\/[0-9]{4}'}
                                    errorMessage={'Please inset a text using the correct pattern'}
                                    errorRequiredMessage={'This field is required'}
                                    required={true}
                                    showError={true}
                                />
                            </th>
                            <th className='item'>
                                <GotenTextField
                                    placeholder={'Insert a email'}
                                    label={'Email'}
                                    type={'email'}
                                    showError={true}
                                />
                            </th>
                        </tr>
                    </tbody>
                </table>
                <input
                    type='submit'
                    value='Validate Form'
                    onClick={() => this.refForm.current.validate()}
                />
            </GotenForm>
        )
    }
}

Props

| Prop Name | Type | Default | Required | Description | |-----------------|-----------|---------|----------|------------------------------------------------------------------------------| | onSuccess | Function | | True | This function is executed when all Goten components are validated correctly. | | onError | Function | | False | This function is executed when all Goten components are validated correctly. | | buttonComponent | Component | | False | Component that will be clicked. |

Methods

• validate()

Validate all Goten components inside the GotenForm.

Contributions

To contribute to this package, we propose the following workflow:

1. Add an issue with related tags to describe the contribution (is it a bug?, a feature request?).
2. Branch your solution from develop, with the name as #<issue_number>_<descriptive_name>.
3. Send a pull request and wait for approval/corrections.