ReactJs with Bootstrap: Multistep form validation, using Formik and Yup

Question

I'm developing a multistep form in ReactJs with Bootstrap, using Formik and Yup. Actually, I have 2 problems here, despite I've read part of Formik and Yup documentation, I haven't found the answer yet.

I change my select fields' values, but the validationSchema simply ignores these values and only the initialValues are submitted to this validation.
Before validating my fields' values through validationSchema, I have to check whether the select option is not the first one (this first option is equivalent to "choose your option" for each field, and when the user submits it, it's value should be empty for the schema), it's possible to be done without validationSchema, by creating a validate function out of Formik, but I want to use Formik because I want a prettier way to display the errors as it does. I've tried plenty of stuff around, but I haven't gotten any answer until now.

Here is the Step 1 Form Code**

import React, { Component } from 'react';
import Form from 'react-bootstrap/Form';
import {ErrorMessage, Formik, validateYupSchema} from "formik";
import Col from 'react-bootstrap/Col';
import InputGroup from 'react-bootstrap/InputGroup';
import Button from 'react-bootstrap/Button';
import * as yup from 'yup';
import PropTypes from 'prop-types';
import {Categories} from './categoriesList.jsx';
import {Brands} from './brandsList';
import {ProductTypes} from './productTypesList';
import NewProduct from './newProductComponent.jsx';

let schema = yup.object().shape({
    productCategory: yup.string().required(),
    productBrand: yup.string().required(),
    productType: yup.string().required()
    });

class FormProducts1 extends Component {

    reset = () => {
        this.props.handleReset1();
    }

    render() { 

        const {values, handleChange, handleReset1} = this.props;

        const CategoryOptions = Categories,
            MakeItemCategory = function(itemCategory) {
                return ;
        };

        const BrandOptions = Brands,
            MakeItemBrand = function(itemBrand) {
                return ;
        };

        const ProductOptions = ProductTypes,
            MakeItemProduct = function(itemProduct) {
                return ;
        };

        return ( 
             {console.log(values)}
             }

            >
            {({ 
              handleSubmit,  
              handleBlur,
              touched,
              isInvalid, //defines what is invalid
              errors //catch up the errors to be displayed
              }) => ( 
              
                
                
                    Categoria do Produto
                     handleBlur('productCategory',true)}
                        isInvalid={touched.productCategory && errors.productCategory}
                        >
                        {CategoryOptions.map(MakeItemCategory)}
                    
                    {errors.productCategory}
                
                
                
                    Marca do Produto
                     handleBlur('productBrand',true)}
                        isInvalid = {touched.productBrand && errors.productBrand} > 
                        {BrandOptions.map(MakeItemBrand)}
                    
                    {errors.productBrand}
                

                
                    Tipo do Produto
                     handleBlur('productType',true)}
                        isInvalid={touched.productType && errors.productType}>
                        {ProductOptions.map(MakeItemProduct)}
                    
                    {errors.productType}
                
            
                
                    

                    
                
               
                
                    
              )}      

            

        );
    }
}


export default FormProducts1;

*****************Here is the Steps' Container Component Code *******************

import React, { Component } from 'react';
import FormProducts1 from './formProducts1';
import FormProducts2 from './formProducts2';
import FormProducts3 from './formProducts3';
import FormProductsSuccess from './formProductsSuccess';
import PropTypes from "prop-types";

class NewProduct extends Component {

    state = { 
        step:1,
        productCategory:'',
        productBrand:'',
        productType:'',
        productName:'',
        productPrice:0,
        productCode:'',
        productDescription:''
    }

    formatForm = {
        marginTop:15
    };

    styleAddButton = {
        fontSize:15,
        fontWeight:"bold"
    };

    //Proceed to the next step
    nextStep = () => {
        const {step} = this.state
        this.setState({
            step: step + 1
        });
    }

    //Go back to previous step 
    
    prevStep = () => {
        const {step} = this.state
        this.setState({
            step: step - 1
        });
    }

    //Handle fields change
    handleChange = input => e => {
        this.setState({
            [input]: e.target.value
        });
    }

    toCurrency(number) {
        const formatter = new Intl.NumberFormat("pt-BR", {
          style: "decimal",
          currency: "BRL"
        });
    
        return formatter.format(number);
    }


    handleReset1 = () => {
        this.setState({
            productCategory:'',
            productBrand:'',
            productType:''
        });
    }

    handleReset2 = () => {
        this.setState({
            productName:'',
            productPrice:0,
            productCode:'',
            productDescription:''
        });
    }

    render() { 
        
        const {step} = this.state;
        const {productCategory, productBrand, productType, productName, productPrice, productCode, productDescription} = this.state;
        const values = {productCategory, productBrand, productType, productName, productPrice, productCode, productDescription};
 

        switch(step){
            case 1:
                return (
                    
                )
            case 2:
                return(
                    
                )
            case 3:
                return(
                    
                )
            case 4:
                return(
                    
                )
        }         
        
    }
}

NewProduct.propTypes = {
    value: PropTypes.string,
    onChange: PropTypes.func
  };
 
export default NewProduct;

Thanks!

ReactJs with Bootstrap: Multistep form validation, using Formik and Yup

Answers (1)

Related Questions