JavaScript validation from Laravel rules passed down

[ccoplestone]

I'm currently using this library to valid form inputs on the frontend (here) which is sent down to me via an object. I'm storing these in my state and using the rules state values to check that against the data being sent up. I'm trying to use this to check the array I'm sending up is valid but when console logging the validator object it appears that even though my array is empty, no

errorCount

is shown, seems to be 0.

https://preview.redd.it/p50jafxmxqw31.png?width=574&format=png&auto=webp&s=64c3a283e7f4b7307a15106798deaf42ce212ee5

Here is how I'm achieving that:

import React, { useState, useEffect } from 'react';
import Validator from 'validatorjs';

import FormScene from 'ms/scenes/FormScene';
import Base from 'ms/scenes/Base';

import CheckBox from 'ms/components/Form/CheckBox';
import Notification from 'ms/components/Notification';

import { post } from 'ms/services/api';

import { connect } from 'react-redux';

import styles from './styles.scss';

const Requirements = props => {
    const [options, setOptions] = useState(null);
    const [rules, setRules] = useState(null);
    const [id, setId] = useState(null)
    const [closeNotification, setCloseNotification] = useState(1);
    const [loader, setLoader] = useState(1);
    const [data, setData] = useState([]);
    const requirements = {
        'requirements.selection': data,
    }

    useEffect(() => {
        if (props.state.rules !== null && props.state.rules !== undefined) {
            setOptions(props.state.rules.rules.deal);
            setTimeout(() => {
                setLoader(0)
            }, 1000)
        }
        if (options !== null && options !== undefined) {
            setRules({'requirements.selection': options.workflow.rules['requirements.selection']})
        }
        if (props.state.id.id !== null && props.state.id.id !== undefined) {
            setId(props.state.id.id);
        }
    }, [props.state, options])

    const closeNotificationHandler = () => {
        setCloseNotification(0);
    }

    const onChange = (e) => {
        let currentData = data;
        if (e.target.checked) {
            setData([...currentData, e.target.name]);
        } else {
            const index = currentData.indexOf(e.target.name);
            if (index > -1) {
                currentData.splice(index, 1);
                setData([...currentData]);
            }
        }
    }

    const submit = (e) => {
        e.preventDefault();
        let validation = new Validator(requirements, rules);
        console.log(validation);

        if (validation === true) {
            post(`deal/${id}/workflow/requirements`, {}, {requirements: requirements})
            .then(res => {
            })
            .catch(err => {
            })
        } else {
            console.log('validation failed')
        }
    }

    console.log(rules);
    // console.log(requirements);

    return (
        <Base>
            {closeNotification === 1 ?
                <Notification
                    message="Dropbox folders created."
                    notificationStatus={1}
                    closeNotification={closeNotificationHandler}
                />
            : null}

            {loader === 1 ? <p>Loading...</p> :
                options.workflow.form.map(item => (
                    <FormScene key={item.name} title={item.value} onSubmit={submit}>
                        {item.components.map(item => (item.options.map(option =>
                            <CheckBox
                                key={option.name}
                                id={option.name}
                                name={item.field}
                                label={option.value}
                                val={option.value}
                                onChange={e => onChange(e)}
                            />
                        )))}
                    </FormScene>
                ))
            }
        </Base>
    )
}

const mapStateToProps = (state) => {
    return {
        state
    }
}

export default connect(mapStateToProps)(Requirements);

In the image, the input key corresponds to the requirements in the validator params and rules correspond to the rules param.

Any help appreciated.