Skip to content

Commit

Permalink
additional code
Browse files Browse the repository at this point in the history
  • Loading branch information
Gopi Gokaraju authored and Gopi Gokaraju committed Feb 1, 2019
1 parent 403aed0 commit c067d5a
Show file tree
Hide file tree
Showing 5 changed files with 243 additions and 4 deletions.
4 changes: 4 additions & 0 deletions src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import Landing from './formik/Landing';
import Navigation from './Navigation';
import FormikComponent from './formik/FormikComponent';
import formikHocComponent from './formik/formikHocComponent';
import formikCustomValidation from './formik/formikCustomValidation';
import formikFieldAndFormLevelValidation from './formik/formikFieldAndFormLevelValidation';

class App extends Component {
render() {
Expand All @@ -18,6 +20,8 @@ class App extends Component {
<Route path="/" exact component={Landing} />
<Route path="/formik" exact component={FormikComponent} />
<Route path="/withFormik" exact component={formikHocComponent} />
<Route path="/customValidation" exact component={formikCustomValidation} />
<Route path="/fieldFormLevel" exact component={formikFieldAndFormLevelValidation} />
</div>
</div>
</Router>
Expand Down
2 changes: 1 addition & 1 deletion src/Navigation.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const Navigation = () => {
<Nav.Link href="/formik">Fromik</Nav.Link>
<Nav.Link href="/withFormik">withFormik</Nav.Link>
<Nav.Link href="/customValidation">Fromik Custom Validation</Nav.Link>
<Nav.Link href="/yupValidation">Yup Validation</Nav.Link>
<Nav.Link href="/fieldFormLevel">Field and Form Level Validation</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
Expand Down
88 changes: 88 additions & 0 deletions src/formik/formikCustomValidation.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
import React from 'react';
import { withFormik, Form, Field } from 'formik';
import { Debug } from './Debug';
import { Button, Row, Col } from 'react-bootstrap';

const formikEnhancer = withFormik({
enableReinitialize: true,
mapPropsToValues: () => ({fname:'',lname:'', accept: false}),
validate: values => {
let errors = {};
if(!values.fname) {
errors.fname = `first name is required`;
}
if(!values.lname) {
errors.lname = `last name is required`;
}
if(!values.accept) {
errors.accept = 'Accpet terms and conditions';
}
return errors
},
handleSubmit: (values, action) => {
action.setSubmitting(false);
}
});

const formikCustomValidation = (props) =>{
console.log(props,"custom props");
const {
isSubmitting,
handleReset,
dirty,
errors,
touched,
} = props;

return (
<React.Fragment>
<div className="container">
<h3>Simple Formik using custom validation</h3>
<Form>
<Row>
<Col sm="4">
<div className="form-group">
<Field type="text" name="fname" className="form-control" placeholder="Enter First Name" />
{
touched && touched.fname && errors && errors.fname && <span style={{ color: 'red'}}>{errors.fname}</span>
}
</div>
<div className="form-group">
<Field type="text" name="lname" className="form-control" placeholder="Enter Last Name" />
{
touched && touched.lname && errors && errors.lname && <span style={{ color: 'red'}}>{errors.lname}</span>
}
</div>
<div className="form-group">
<Field type="text" name="accept">
{

({ field , form: { touched, errors }}) =>
<div>
<input type="checkbox" checked={field.value} {...field} />
<label htmlFor={`${field.name}`}>Terms and conditions</label>
{
touched[field.name] && errors[field.name] && <span style={{ color: 'red'}}>{errors[field.name]}</span>
}
</div>
}
</Field>
</div>
</Col>
</Row>
<Row>
<Col sm="1">
<Button color="success" type="submit" disabled={isSubmitting || !dirty}>Submit</Button>
</Col>
<Col sm="1">
<Button color="grey" disabled={isSubmitting || !dirty} onClick={handleReset}>Reset</Button>
</Col>
</Row>
<Debug />
</Form>
</div>
</React.Fragment>
)
};

export default formikEnhancer(formikCustomValidation);
150 changes: 150 additions & 0 deletions src/formik/formikFieldAndFormLevelValidation.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,150 @@
import React from 'react';
import { compose, withHandlers } from 'recompose';
import { withFormik, Form, Field, ErrorMessage } from 'formik';
import { Debug } from './Debug';
import { Button, Row, Col } from 'react-bootstrap';

const formikEnhancer = withFormik({
enableReinitialize: true,
// By default validateOnChange and validateOnBlur are set to true
// validateOnChange: false,
// validateOnBlur: false,
validate: values => {
let errors = {};
if(!values.lname) {
errors.lname = `last name is required`;
}
if(!values.accept) {
errors.accept = 'Accpet terms and conditions';
}
return errors
},
mapPropsToValues: () => ({fname:'',lname:'', accept: false, username: ''}),
handleSubmit: (values, action) => {
console.log(action);
if(values.username === "user") {
action.setFieldError("username", "Please enter another name");
action.setFieldValue("username", "admin", true);
}
action.setSubmitting(false);
}
});
const enhance = compose(
formikEnhancer,
withHandlers({
validateAllFields : ({ setErrors, setFieldTouched }) => async(validateForm) => {
const errors = await validateForm();
if(errors) {
setFieldTouched("fname");
setFieldTouched("lname");
setFieldTouched("accept");
setErrors(errors);
}
}
}),
);

const validateFirstName = value => {
let error;
if(!value) {
error = "First name is required"
} else if(value.length <= 3) {
error = "First name should atleast have 4 characters"
}
return error
}

const validateUserName = value => {
let error;
if(value === 'admin') {
error = 'Not Valid User';
}
return error;
}

const formikFieldAndFormLevelValidation = enhance(({ validateAllFields, ...props}) =>{
console.log(props,validateAllFields);
const {
isSubmitting,
handleReset,
dirty,
validateField,
validateForm,
} = props;

return (
<React.Fragment>
<div className="container">
<h3>Simple Formik using custom validation</h3>
<Form>
<Row>
<Col sm="4">
<div className="form-group">
<Field type="text" name="fname" className="form-control" validate={validateFirstName} placeholder="Enter First Name" />
<ErrorMessage name="fname">
{
msg => <span style={{ color: 'red'}}>{msg}</span>
}
</ErrorMessage>
</div>
<div className="form-group">
<Field type="text" name="lname" className="form-control" placeholder="Enter Last Name" />
<ErrorMessage name="lname">
{
msg => <span style={{ color: 'red'}}>{msg}</span>
}
</ErrorMessage>
</div>
<div className="form-group">
<Field type="text" name="username" className="form-control" validate={validateUserName} placeholder="Enter User Name" />
<ErrorMessage name="username">
{
msg => <span style={{ color: 'red'}}>{msg}</span>
}
</ErrorMessage>
</div>
<div className="form-group">
<Field type="text" name="accept">
{

({ field }) =>
<div>
<input type="checkbox" checked={field.value} {...field} />
<label htmlFor={`${field.name}`}>Terms and conditions</label>
<ErrorMessage name={`${field.name}`}>
{
msg => <span style={{ color: 'red'}}>{msg}</span>
}
</ErrorMessage>
</div>
}
</Field>
</div>
</Col>
</Row>
<Row style={{marginBottom: "5px"}}>
<Col sm="3">
<Button color="success" onClick={() => validateField('username')}>Validate UserName</Button>
</Col>
</Row>
<Row style={{marginBottom: "5px"}}>
<Col sm="3">
<Button color="success" onClick={() => validateAllFields(validateForm)}>Validate All Fields</Button>
</Col>
</Row>
<Row>
<Col sm="1">
<Button color="success" type="submit" disabled={isSubmitting || !dirty}>Submit</Button>
</Col>
<Col sm="1">
<Button color="grey" disabled={isSubmitting || !dirty} onClick={handleReset}>Reset</Button>
</Col>
</Row>
<Debug />
</Form>
</div>
</React.Fragment>
)
});

export default formikFieldAndFormLevelValidation;
3 changes: 0 additions & 3 deletions src/formik/formikHocComponent.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { compose } from 'recompose';
import { withFormik, Form, Field } from 'formik';
import { Debug } from './Debug';
import { Button, Row, Col } from 'react-bootstrap';
Expand All @@ -13,8 +12,6 @@ const formikEnhancer = withFormik({

const formikHocComponent = (props) =>{
const {
values,
errors,
isSubmitting,
handleReset,
dirty
Expand Down

0 comments on commit c067d5a

Please sign in to comment.