Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-form-validator-component
Advanced tools
react-form-validator-component - npm Package Compare versions
Comparing version 1.6.2 to 1.6.3
| { | ||
| "name": "react-form-validator-component", | ||
| "version": "1.6.2", | ||
| "version": "1.6.3", | ||
| "main": "build/lib/index.js", | ||
@@ -5,0 +5,0 @@ "repository": "git@github.com:JDLT-Ltd/react-form-validator-component.git", |
@@ -92,3 +92,3 @@ # React Form Validator | ||
| * `fields` - an object with one property per input field | ||
| The key to each property must match the `name` attribute of the input field it refers to, and its value is an object with one property: a `rules` array of any combination of strings referring to our predefined validation rules and user-defined custom rules. | ||
| The key to each property must match the `name` attribute of the input field it refers to, and its value is an object with one property: a `rules` array of any combination of strings referring to our predefined validation rules and user-defined custom rules. You can optionally provide a `defaultValue` property for each field. This is only required if you want to validate your form on load but are using form field components which don't correlate one-to-one with actual DOM nodes. E.g. `semantic-ui-react`'s `DropDown` component. In that case, the Validator's default method of checking values on load will fail. | ||
@@ -95,0 +95,0 @@ #### Optional Props |
| import React from 'react' | ||
| import reactDOM from 'react-dom' | ||
| import { Form, Header, Label, Input, Container, Button, Dropdown, Modal, Checkbox } from 'semantic-ui-react' | ||
| import { Form, Header, Label, Container, Button, Dropdown } from 'semantic-ui-react' | ||
@@ -8,105 +8,19 @@ import { Validator } from '../lib/index' | ||
| //this is a custom rule | ||
| const providerOptions = [ | ||
| // const isRequired = { | ||
| // validator: data => { | ||
| // if (data) return true | ||
| // return false | ||
| // }, | ||
| // error: 'Please provide a value' | ||
| // } | ||
| const options = [ | ||
| { | ||
| text: 'AWS', | ||
| value: 'amazon' | ||
| text: 'option 1', | ||
| value: 1 | ||
| }, | ||
| { | ||
| text: 'Azure', | ||
| value: 'azure' | ||
| text: 'option 2', | ||
| value: 2 | ||
| } | ||
| ] | ||
| const fields = { | ||
| none: { | ||
| cloudProvider: { | ||
| name: 'cloudProvider', | ||
| rules: [], | ||
| required: true | ||
| } | ||
| }, | ||
| amazon: { | ||
| cloudProvider: { | ||
| name: 'cloudProvider', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| accessKey: { | ||
| name: 'accessKey', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| secretKey: { | ||
| name: 'secretKey', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| endpoint: { | ||
| name: 'endpoint', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| friendlyName: { | ||
| name: 'friendlyName', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| importExisting: { | ||
| name: 'importExisting', | ||
| rules: [], | ||
| required: true | ||
| } | ||
| }, | ||
| azure: { | ||
| cloudProvider: { | ||
| name: 'cloudProvider', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| clientId: { | ||
| name: 'clientId', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| clientSecret: { | ||
| name: 'clientSecret', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| regionCode: { | ||
| name: 'regionCode', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| subscriberId: { | ||
| name: 'subscriberId', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| tenantId: { | ||
| name: 'tenantId', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| importExisting: { | ||
| name: 'importExisting', | ||
| rules: [], | ||
| required: true | ||
| }, | ||
| friendlyName: { | ||
| name: 'friendlyName', | ||
| rules: [], | ||
| required: true | ||
| } | ||
| } | ||
| } | ||
| // const BIND_CLOUD = gql` | ||
| // mutation bindCloud($zoneType: String!, $friendlyName: String!, $config: MorpheusCloudConfig) { | ||
| // bindCloud(zoneType: $zoneType, friendlyName: $friendlyName, config: $config) { | ||
| // id | ||
| // } | ||
| // } | ||
| // ` | ||
| class App extends React.Component { | ||
@@ -116,15 +30,40 @@ constructor(props) { | ||
| this.state = { | ||
| cloudProvider: 'amazon' | ||
| } | ||
| this.onDropdownChange = this.onDropdownChange.bind(this) | ||
| this.state = {} | ||
| } | ||
| onDropdownChange(event, data) { | ||
| this.setState({ cloudProvider: data.value }) | ||
| fields = { | ||
| // emailAddresses: { | ||
| // name: 'emailAddresses', | ||
| // rules: ['isEmailArray'], | ||
| // required: true, | ||
| // label: 'Email addresses' | ||
| // }, | ||
| // something: { | ||
| // name: 'something', | ||
| // rules: ['isPhoneNumber'], | ||
| // required: 'test', | ||
| // label: 'Something' | ||
| // }, | ||
| // number: { | ||
| // name: 'number', | ||
| // rules: ['isNumeric'], | ||
| // required: 'group2', | ||
| // label: 'number' | ||
| // }, | ||
| // name: { | ||
| // name: 'name', | ||
| // rules: ['isFullName'], | ||
| // required: 'group2', | ||
| // label: 'name' | ||
| // }, | ||
| sources: { | ||
| rules: [], | ||
| name: 'sources', | ||
| required: true, | ||
| label: 'sources', | ||
| defaultValue: [options[0].value] | ||
| } | ||
| } | ||
| renderErrors = errors => { | ||
| if (!errors) return | ||
| renderErrors(errors) { | ||
| return errors.map((error, i) => { | ||
@@ -142,147 +81,137 @@ return ( | ||
| <Container> | ||
| <Modal trigger={<Button color="blue">Bind cloud</Button>}> | ||
| <Modal.Content> | ||
| <Header as="h2">Bind cloud</Header> | ||
| <Validator parent={this} fields={fields[this.state.cloudProvider] || fields.none} validateOnLoad={false}> | ||
| {({ isFormValid, isFieldValid, errors, onChange }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field width="5"> | ||
| <Form.Dropdown | ||
| name="cloudProvider" | ||
| label="Cloud provider" | ||
| selection | ||
| placeholder={'Select a provider'} | ||
| options={[ | ||
| { | ||
| text: 'AWS', | ||
| value: 'amazon' | ||
| }, | ||
| { | ||
| text: 'Azure', | ||
| value: 'azure' | ||
| } | ||
| ]} | ||
| onChange={onChange} | ||
| /> | ||
| </Form.Field> | ||
| {/* {this.renderErrors(errors.cloudProvider)} */} | ||
| <Form.Field width="5"> | ||
| <Form.Input name="friendlyName" label="Friendly name" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.friendlyName)} */} | ||
| </Form.Field> | ||
| {this.state.cloudProvider === 'amazon' && ( | ||
| <React.Fragment> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="accessKey" label="Access key" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.accessKey)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="secretKey" label="Secret key" onChange={onChange} type="password" /> | ||
| {/* {this.renderErrors(errors.secretKey)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Select | ||
| name="endpoint" | ||
| label="Endpoint" | ||
| selection | ||
| placeholder={'Select an endpoint'} | ||
| options={[{ text: 'Option A', value: 'A' }, { text: 'Option B', value: 'B' }]} | ||
| onChange={onChange} | ||
| /> | ||
| {/* {this.renderErrors(errors.endpoint)} */} | ||
| </Form.Field> | ||
| </React.Fragment> | ||
| )} | ||
| {this.state.cloudProvider === 'azure' && ( | ||
| <React.Fragment> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="accessKey" label="Access key" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.accessKey)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="clientId" label="Client ID" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.clientId)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="clientSecret" label="Client secret" type="password" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.clientSecret)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input type="text" label="Location" name="regionCode" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.regionCode)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="subscriberId" label="Subscriber Id" type="text" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.subscriberId)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Form.Input name="tenantId" label="Tenant ID" type="text" onChange={onChange} /> | ||
| {/* {this.renderErrors(errors.tenantId)} */} | ||
| </Form.Field> | ||
| <Form.Field width="5"> | ||
| <Checkbox | ||
| name="importExisting" | ||
| label="Import existing instances" | ||
| // type="checkbox" | ||
| // onChange={onChange} | ||
| onClick={e => { | ||
| onChange({ target: { name: 'importExisting', value: !this.state.importExisting } }) | ||
| }} | ||
| /> | ||
| {/* {this.renderErrors(errors.importExisting)} */} | ||
| </Form.Field> | ||
| </React.Fragment> | ||
| )} | ||
| {/* <Mutation | ||
| mutation={BIND_CLOUD} | ||
| onCompleted={data => toastie.success(data)} | ||
| onError={error => { | ||
| toastie.error(`There was an error: ${error}`) | ||
| }} | ||
| > | ||
| {(bind, { called, loading }) => ( | ||
| <Form.Field> | ||
| <Button | ||
| color="green" | ||
| disabled={!isFormValid || this.state.cloudProvider === 'none' || loading} | ||
| onClick={e => { | ||
| e.preventDefault() | ||
| const config = | ||
| this.state.cloudProvider === 'amazon' | ||
| ? { | ||
| accessKey: this.state.accessKey, | ||
| secretKey: this.state.secretKey, | ||
| endpoint: this.state.endpoint | ||
| } | ||
| : { | ||
| accessKey: this.state.accessKey, | ||
| clientId: this.state.clientId, | ||
| clientSecret: this.state.clientSecret, | ||
| tenantId: this.state.tenantId, | ||
| subscriberId: this.state.subscriberId, | ||
| regionCode: this.state.regionCode, | ||
| importExisting: this.state.importExisting | ||
| } | ||
| bind({ | ||
| variables: { | ||
| zoneType: this.state.cloudProvider, | ||
| friendlyName: this.state.friendlyName, | ||
| config | ||
| } | ||
| }) | ||
| }} | ||
| > | ||
| Bind | ||
| </Button> | ||
| </Form.Field> | ||
| )} | ||
| </Mutation> */} | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| </Modal.Content> | ||
| </Modal> | ||
| <Header as="h1">Examples for using RFVC</Header> | ||
| <Header as="h2">Basic Validation</Header> | ||
| <Validator fields={this.fields} parent={this} validateOnLoad> | ||
| {({ isFormValid, onChange }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field | ||
| name="sources" | ||
| label="Source / Source Group" | ||
| options={options} | ||
| defaultValue={[1]} | ||
| fluid | ||
| multiple | ||
| selection | ||
| search | ||
| onChange={onChange} | ||
| control={Dropdown} | ||
| /> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <Button disabled={!isFormValid}>Test</Button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| {/* <Header as={'h2'}>Basic Validation using fields to map (and no semantic-ui)</Header> | ||
| <Validator fields={this.fields} parent={this}> | ||
| {({ isFormValid, fields, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| {fields && | ||
| fields.map((input, i) => { | ||
| return ( | ||
| <div key={i}> | ||
| <label>{input.value.label}</label> | ||
| <input name={input.value.name} onChange={onChange} /> | ||
| {this.renderErrors(errors[input.value.name])} | ||
| </div> | ||
| ) | ||
| })} | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using isFieldValid</Header> | ||
| <Validator fields={this.fields} parent={this}> | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} /> | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using validateOnLoad and isFieldValid</Header> | ||
| <Validator fields={this.fields} parent={this} validateOnLoad> | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} value={'I_DONT_WORK'} /> | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} defaultValue={''} /> | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> | ||
| <Header as="h2">Validation using a custom onValidate handler</Header> | ||
| <Validator | ||
| fields={this.fields} | ||
| onValidate={(fieldName, fieldValue) => this.setState({ hidden: fieldValue })} | ||
| validateOnLoad | ||
| > | ||
| {({ isFormValid, isFieldValid, onChange, errors }) => { | ||
| return ( | ||
| <Form> | ||
| <Form.Field> | ||
| <label>Your Emails</label> | ||
| <Input name="emailAddresses" onChange={onChange} /> | ||
| {this.renderErrors(errors.emailAddresses)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('sure is')} disabled={!isFieldValid.emailAddresses}> | ||
| Thats an Email! | ||
| </Button> | ||
| <Form.Field> | ||
| <label>Something</label> | ||
| <Input name="something" onChange={onChange} /> | ||
| {this.renderErrors(errors.something)} | ||
| </Form.Field> | ||
| <Button onClick={() => alert('is it?')} disabled={!isFieldValid.something}> | ||
| Its not nothing | ||
| </Button> | ||
| {<span>Form is {isFormValid ? 'valid' : 'not valid'}</span>} | ||
| <hr /> | ||
| <button disabled={!isFormValid}>Test</button> | ||
| </Form> | ||
| ) | ||
| }} | ||
| </Validator> */} | ||
| </Container> | ||
@@ -289,0 +218,0 @@ ) |
@@ -105,3 +105,3 @@ import React from 'react' | ||
| removeAllErrors = fieldName => { | ||
| removeAllErrorMessages = fieldName => { | ||
| this.setState({ errors: Object.assign(this.state.errors, { [fieldName]: [] }) }) | ||
@@ -179,3 +179,3 @@ } | ||
| }, | ||
| () => this.removeAllErrors(fieldName) | ||
| () => this.removeAllErrorMessages(fieldName) | ||
| ) | ||
@@ -197,2 +197,3 @@ return true | ||
| validateFieldAndUpdateState(fieldName, fieldValue) { | ||
| console.log('fieldName: ', fieldName, 'fieldValue: ', fieldValue) | ||
| const onValidate = this.props.fields[fieldName].onValidate || this.props.onValidate || this.onValidate | ||
@@ -216,5 +217,8 @@ | ||
| let fieldValue = | ||
| document.getElementsByName(fieldName)[0] && document.getElementsByName(fieldName)[0].value | ||
| Object.values(this.props.fields).find(field => { | ||
| return field.name === fieldName | ||
| }).defaultValue || | ||
| (document.getElementsByName(fieldName)[0] && document.getElementsByName(fieldName)[0].value | ||
| ? document.getElementsByName(fieldName)[0].value | ||
| : '' | ||
| : '') | ||
| this.validateFieldAndUpdateState(fieldName, fieldValue) | ||
@@ -248,7 +252,7 @@ }) | ||
| this.validateFormAndUpdateState() | ||
| if (this.props.validateOnLoad) Object.values(this.props.fields).map(field => this.removeAllErrors(field.name)) | ||
| if (this.props.validateOnLoad) | ||
| Object.values(this.props.fields).map(field => this.removeAllErrorMessages(field.name)) | ||
| } | ||
| render() { | ||
| console.log('this.props here is :', this.props) | ||
| const { errors, isFormValid, validation } = this.state | ||
@@ -255,0 +259,0 @@ return this.props.children({ |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.69%
324881
- Lines of code
- decreased by-7.93%
720
No dependency changes